From c6b766d8ea902294ab1f7e4a06781f2bcfdd1f0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=A0=E6=9C=A8?= <netfan@foxmail.com>
Date: Fri, 11 Jun 2021 00:29:39 +0800
Subject: [PATCH] fix(route): dynamically introduce components error
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修复后台权限模式下，加载IFrame类型的路由时会丢失component的问题
---
 mock/sys/menu.ts                 | 32 ++++++++++++++++++++++++++++++--
 src/router/helper/routeHelper.ts | 18 ++++++++++++++----
 2 files changed, 44 insertions(+), 6 deletions(-)

diff --git a/mock/sys/menu.ts b/mock/sys/menu.ts
index c61e2164..bc7bfe02 100644
--- a/mock/sys/menu.ts
+++ b/mock/sys/menu.ts
@@ -168,6 +168,34 @@ const sysRoute = {
   ],
 };
 
+const linkRoute = {
+  path: '/link',
+  name: 'Link',
+  component: 'LAYOUT',
+  meta: {
+    icon: 'ion:tv-outline',
+    title: 'routes.demo.iframe.frame',
+  },
+  children: [
+    {
+      path: 'doc',
+      name: 'Doc',
+      meta: {
+        title: 'routes.demo.iframe.doc',
+        frameSrc: 'https://vvbin.cn/doc-next/',
+      },
+    },
+    {
+      path: 'https://vvbin.cn/doc-next/',
+      name: 'DocExternal',
+      component: 'LAYOUT',
+      meta: {
+        title: 'routes.demo.iframe.docExternal',
+      },
+    },
+  ],
+};
+
 export default [
   {
     url: '/basic-api/getMenuList',
@@ -184,10 +212,10 @@ export default [
       }
       const id = checkUser.userId;
       if (!id || id === '1') {
-        return resultSuccess([dashboardRoute, authRoute, levelRoute, sysRoute]);
+        return resultSuccess([dashboardRoute, authRoute, levelRoute, sysRoute, linkRoute]);
       }
       if (id === '2') {
-        return resultSuccess([dashboardRoute, authRoute, levelRoute]);
+        return resultSuccess([dashboardRoute, authRoute, levelRoute, linkRoute]);
       }
     },
   },
diff --git a/src/router/helper/routeHelper.ts b/src/router/helper/routeHelper.ts
index e85bf32f..0d3fa370 100644
--- a/src/router/helper/routeHelper.ts
+++ b/src/router/helper/routeHelper.ts
@@ -7,8 +7,12 @@ import { warn } from '/@/utils/log';
 import { createRouter, createWebHashHistory } from 'vue-router';
 
 export type LayoutMapKey = 'LAYOUT';
+const IFRAME = () => import('/@/views/sys/iframe/FrameBlank.vue');
 
-const LayoutMap = new Map<LayoutMapKey, () => Promise<typeof import('*.vue')>>();
+const LayoutMap = new Map<String, () => Promise<typeof import('*.vue')>>();
+
+LayoutMap.set('LAYOUT', LAYOUT);
+LayoutMap.set('IFRAME', IFRAME);
 
 let dynamicViewsModules: Record<string, () => Promise<Recordable>>;
 
@@ -17,10 +21,18 @@ function asyncImportRoute(routes: AppRouteRecordRaw[] | undefined) {
   dynamicViewsModules = dynamicViewsModules || import.meta.glob('../../views/**/*.{vue,tsx}');
   if (!routes) return;
   routes.forEach((item) => {
+    if (!item.component && item.meta?.frameSrc) {
+      item.component = 'IFRAME';
+    }
     const { component, name } = item;
     const { children } = item;
     if (component) {
-      item.component = dynamicImport(dynamicViewsModules, component as string);
+      const layoutFound = LayoutMap.get(component);
+      if (layoutFound) {
+        item.component = layoutFound;
+      } else {
+        item.component = dynamicImport(dynamicViewsModules, component as string);
+      }
     } else if (name) {
       item.component = getParentLayout();
     }
@@ -53,8 +65,6 @@ function dynamicImport(
 
 // Turn background objects into routing objects
 export function transformObjToRoute<T = AppRouteModule>(routeList: AppRouteModule[]): T[] {
-  LayoutMap.set('LAYOUT', LAYOUT);
-
   routeList.forEach((route) => {
     if (route.component) {
       if ((route.component as string).toUpperCase() === 'LAYOUT') {
-- 
GitLab