canrd-outside / order-erp-front · Commits

Commit c6b766d8ea902294ab1f7e4a06781f2bcfdd1f0b

Authored by 无木
1 parent a222ec85

fix(route): dynamically introduce components error 

修复后台权限模式下，加载IFrame类型的路由时会丢失component的问题
Inline Side-by-side
Showing 2 changed files with 44 additions and 6 deletions
mock/sys/menu.ts
  View file @c6b766d
... ... @@ -168,6 +168,34 @@ const sysRoute = {
168 168 ],
169 169 };
170 170  
  171 +const linkRoute = {
  172 + path: '/link',
  173 + name: 'Link',
  174 + component: 'LAYOUT',
  175 + meta: {
  176 + icon: 'ion:tv-outline',
  177 + title: 'routes.demo.iframe.frame',
  178 + },
  179 + children: [
  180 + {
  181 + path: 'doc',
  182 + name: 'Doc',
  183 + meta: {
  184 + title: 'routes.demo.iframe.doc',
  185 + frameSrc: 'https://vvbin.cn/doc-next/',
  186 + },
  187 + },
  188 + {
  189 + path: 'https://vvbin.cn/doc-next/',
  190 + name: 'DocExternal',
  191 + component: 'LAYOUT',
  192 + meta: {
  193 + title: 'routes.demo.iframe.docExternal',
  194 + },
  195 + },
  196 + ],
  197 +};
  198 +
171 199 export default [
172 200 {
173 201 url: '/basic-api/getMenuList',
... ... @@ -184,10 +212,10 @@ export default [
184 212 }
185 213 const id = checkUser.userId;
186 214 if (!id || id === '1') {
187   - return resultSuccess([dashboardRoute, authRoute, levelRoute, sysRoute]);
  215 + return resultSuccess([dashboardRoute, authRoute, levelRoute, sysRoute, linkRoute]);
188 216 }
189 217 if (id === '2') {
190   - return resultSuccess([dashboardRoute, authRoute, levelRoute]);
  218 + return resultSuccess([dashboardRoute, authRoute, levelRoute, linkRoute]);
191 219 }
192 220 },
193 221 },
... ...
src/router/helper/routeHelper.ts
  View file @c6b766d
... ... @@ -7,8 +7,12 @@ import { warn } from '/@/utils/log';
7 7 import { createRouter, createWebHashHistory } from 'vue-router';
8 8  
9 9 export type LayoutMapKey = 'LAYOUT';
  10 +const IFRAME = () => import('/@/views/sys/iframe/FrameBlank.vue');
10 11  
11   -const LayoutMap = new Map<LayoutMapKey, () => Promise<typeof import('*.vue')>>();
  12 +const LayoutMap = new Map<String, () => Promise<typeof import('*.vue')>>();
  13 +
  14 +LayoutMap.set('LAYOUT', LAYOUT);
  15 +LayoutMap.set('IFRAME', IFRAME);
12 16  
13 17 let dynamicViewsModules: Record<string, () => Promise<Recordable>>;
14 18  
... ... @@ -17,10 +21,18 @@ function asyncImportRoute(routes: AppRouteRecordRaw[] | undefined) {
17 21 dynamicViewsModules = dynamicViewsModules || import.meta.glob('../../views/**/*.{vue,tsx}');
18 22 if (!routes) return;
19 23 routes.forEach((item) => {
  24 + if (!item.component && item.meta?.frameSrc) {
  25 + item.component = 'IFRAME';
  26 + }
20 27 const { component, name } = item;
21 28 const { children } = item;
22 29 if (component) {
23   - item.component = dynamicImport(dynamicViewsModules, component as string);
  30 + const layoutFound = LayoutMap.get(component);
  31 + if (layoutFound) {
  32 + item.component = layoutFound;
  33 + } else {
  34 + item.component = dynamicImport(dynamicViewsModules, component as string);
  35 + }
24 36 } else if (name) {
25 37 item.component = getParentLayout();
26 38 }
... ... @@ -53,8 +65,6 @@ function dynamicImport(
53 65  
54 66 // Turn background objects into routing objects
55 67 export function transformObjToRoute<T = AppRouteModule>(routeList: AppRouteModule[]): T[] {
56   - LayoutMap.set('LAYOUT', LAYOUT);
57   -
58 68 routeList.forEach((route) => {
59 69 if (route.component) {
60 70 if ((route.component as string).toUpperCase() === 'LAYOUT') {
... ...