Browse Source

fix: 采用import.meta.glob方法匹配动态路由

xiaoxian521 3 years ago
parent
commit
ad0281839f
2 changed files with 5 additions and 4 deletions
  1. 4 3
      src/router/index.ts
  2. 1 1
      src/views/permission/page.vue

+ 4 - 3
src/router/index.ts

@@ -10,6 +10,9 @@ import permissionRouter from "./modules/permission";
 import remainingRouter from "./modules/remaining"; //静态路由
 import Layout from "/@/layout/index.vue";
 
+// https://cn.vitejs.dev/guide/features.html#glob-import
+const modulesRoutes = import.meta.glob("/src/views/*/*/*.vue");
+
 import { getAsyncRoutes } from "/@/api/routes";
 import { storageSession } from "../utils/storage";
 import { i18n } from "/@/plugins/i18n/index";
@@ -31,9 +34,7 @@ const addAsyncRoutes = (arrRoutes: Array<string>) => {
     if (v.redirect) {
       v.component = Layout;
     } else {
-      // https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations
-      v.component = () =>
-        import(/* @vite-ignore */ `/@/views${v.path}/index.vue`);
+      v.component = modulesRoutes[`/src/views${v.path}/index.vue`];
     }
     if (v.children) {
       addAsyncRoutes(v.children);

+ 1 - 1
src/views/permission/page.vue

@@ -3,7 +3,7 @@
     <h4>
       当前角色:
       <span style="font-size:26px">{{ purview }}</span>
-      <p style="color:	#FFA500">查看左侧菜单变化(系统管理),模拟后台根据不同角色返回对应路由</p>
+      <p style="color:#FFA500">查看左侧菜单变化(系统管理),模拟后台根据不同角色返回对应路由</p>
     </h4>
     <el-button type="primary" @click="changRole">切换角色</el-button>
   </div>