fix(projects): 修复页面缓存

src/router/cache.ts

@@ -0,0 +1,38 @@
+import type { RouteRecordRaw } from 'vue-router';
+import { routes } from './routes';
+
+function getCacheRoutes() {
+  const cacheNames: string[] = [];
+  routes.forEach(route => {
+    const isCache = isKeepAlive(route);
+    cacheNames.push(...getCacheName(route, isCache));
+  });
+  return cacheNames;
+}
+
+function getCacheName(route: RouteRecordRaw, isCache: boolean) {
+  const cacheNames: string[] = [];
+  const hasChild = hasChildren(route);
+  if (isCache && !hasChild) {
+    const name = route.name as string;
+    cacheNames.push(name);
+  }
+  if (hasChild) {
+    const children = route.children as RouteRecordRaw[];
+    children.forEach(item => {
+      const isChildCache = isCache || isKeepAlive(item);
+      cacheNames.push(...getCacheName(item, isChildCache));
+    });
+  }
+  return cacheNames;
+}
+
+function isKeepAlive(route: RouteRecordRaw) {
+  return Boolean(route?.meta?.keepAlive);
+}
+function hasChildren(route: RouteRecordRaw) {
+  return Boolean(route.children && route.children.length);
+}
+
+/** 被缓存的路由 */
+export const cacheRoutes = getCacheRoutes();

src/router/components.ts

@@ -0,0 +1,35 @@
+import { getRouteNameMap, setCacheName } from './helpers';
+import Login from '@/views/system/login/index.vue';
+import NoPermission from '@/views/system/exception/403.vue';
+import NotFound from '@/views/system/exception/404.vue';
+import ServiceError from '@/views/system/exception/500.vue';
+import DashboardAnalysis from '@/views/dashboard/analysis/index.vue';
+import DashboardWorkbench from '@/views/dashboard/workbench/index.vue';
+
+const Exception403 = { ...NoPermission };
+const Exception404 = { ...NotFound };
+const Exception500 = { ...ServiceError };
+
+const RouteNameMap = getRouteNameMap();
+
+setCacheName(Login, RouteNameMap.get('login'));
+setCacheName(NoPermission, RouteNameMap.get('no-permission'));
+setCacheName(NotFound, RouteNameMap.get('not-found'));
+setCacheName(ServiceError, RouteNameMap.get('service-error'));
+setCacheName(DashboardAnalysis, RouteNameMap.get('dashboard-analysis'));
+setCacheName(DashboardWorkbench, RouteNameMap.get('dashboard-workbench'));
+setCacheName(Exception404, RouteNameMap.get('exception-404'));
+setCacheName(Exception403, RouteNameMap.get('exception-403'));
+setCacheName(Exception500, RouteNameMap.get('exception-500'));
+
+export {
+  Login,
+  NoPermission,
+  NotFound,
+  ServiceError,
+  DashboardAnalysis,
+  DashboardWorkbench,
+  Exception403,
+  Exception404,
+  Exception500
+};

src/router/helpers.ts

@@ -0,0 +1,15 @@
+import type { Component } from 'vue';
+import { EnumRoutePath } from '@/enum';
+import type { RoutePathKey } from '@/interface';
+
+/** 获取路由name map */
+export function getRouteNameMap() {
+  return new Map<RoutePathKey, RoutePathKey>((Object.keys(EnumRoutePath) as RoutePathKey[]).map(v => [v, v]));
+}
+
+/** 给需要缓存的页面组件设置名称 */
+export function setCacheName(component: Component, name?: string) {
+  if (name) {
+    Object.assign(component, { name });
+  }
+}

src/router/index.ts

@@ -1,3 +1,4 @@
 export { router, setupRouter } from './setup';
 export { RouteNameMap, ROUTE_HOME, customRoutes } from './routes';
 export { menus } from './menus';
+export { cacheRoutes } from './cache';

src/router/menus.ts

@@ -1,9 +1,9 @@
 import type { Component } from 'vue';
 import { customRoutes } from './routes';
-import { CustomRoute, GlobalMenuOption } from '@/interface';
+import type { CustomRoute, GlobalMenuOption } from '@/interface';
 import { dynamicIconRender } from '@/utils';
 
-export function transformRouteToMenu(routes: CustomRoute[]) {
+function transformRouteToMenu(routes: CustomRoute[]) {
   const globalMenu: GlobalMenuOption[] = [];
   routes.forEach(route => {
     if (asMenu(route)) {

src/router/routes.ts

@@ -3,14 +3,25 @@ import { Dashboard } from '@vicons/carbon';
 import { ExceptionOutlined } from '@vicons/antd';
 import { BasicLayout, BlankLayout } from '@/layouts';
 import { EnumRoutePath, EnumRouteTitle } from '@/enum';
-import type { CustomRoute, RoutePathKey, LoginModuleType } from '@/interface';
+import type { CustomRoute, LoginModuleType } from '@/interface';
 import { getLoginModuleRegExp } from '@/utils';
+import {
+  Login,
+  NoPermission,
+  NotFound,
+  ServiceError,
+  DashboardAnalysis,
+  DashboardWorkbench,
+  Exception403,
+  Exception404,
+  Exception500
+} from './components';
+import { getRouteNameMap } from './helpers';
 
 /** 路由名称 */
-export const RouteNameMap = new Map<RoutePathKey, RoutePathKey>(
-  (Object.keys(EnumRoutePath) as RoutePathKey[]).map(v => [v, v])
-);
+export const RouteNameMap = getRouteNameMap();
 
+/** 登录模块的正则字符串 */
 const loginModuleRegExp = getLoginModuleRegExp();
 
 /**
@@ -24,6 +35,7 @@ const constantRoutes: RouteRecordRaw[] = [
     component: BlankLayout,
     redirect: { name: RouteNameMap.get('not-found') },
     meta: {
+      keepAlive: true,
       title: EnumRouteTitle.system
     },
     children: [
@@ -31,7 +43,7 @@ const constantRoutes: RouteRecordRaw[] = [
       {
         name: RouteNameMap.get('login'),
         path: `${EnumRoutePath.login}/:module(/${loginModuleRegExp}/)?`,
-        component: () => import('@/views/system/login/index.vue'),
+        component: Login,
         props: route => {
           const moduleType: LoginModuleType = (route.params.module as LoginModuleType) || 'pwd-login';
           return {
@@ -43,31 +55,31 @@ const constantRoutes: RouteRecordRaw[] = [
           fullPage: true
         }
       },
-      // 404
-      {
-        name: RouteNameMap.get('not-found'),
-        path: EnumRoutePath['not-found'],
-        component: () => import('@/views/system/exception/404.vue'),
-        meta: {
-          title: EnumRouteTitle['not-found'],
-          fullPage: true
-        }
-      },
       // 403
       {
         name: RouteNameMap.get('no-permission'),
         path: EnumRoutePath['no-permission'],
-        component: () => import('@/views/system/exception/403.vue'),
+        component: NoPermission,
         meta: {
           title: EnumRouteTitle['no-permission'],
           fullPage: true
         }
       },
+      // 404
+      {
+        name: RouteNameMap.get('not-found'),
+        path: EnumRoutePath['not-found'],
+        component: NotFound,
+        meta: {
+          title: EnumRouteTitle['not-found'],
+          fullPage: true
+        }
+      },
       // 500
       {
         name: RouteNameMap.get('service-error'),
         path: EnumRoutePath['service-error'],
-        component: () => import('@/views/system/exception/500.vue'),
+        component: ServiceError,
         meta: {
           title: EnumRouteTitle['service-error'],
           fullPage: true
@@ -86,7 +98,7 @@ const constantRoutes: RouteRecordRaw[] = [
 export const ROUTE_HOME: CustomRoute = {
   name: RouteNameMap.get('dashboard-analysis'),
   path: EnumRoutePath['dashboard-analysis'],
-  component: () => import('@/views/dashboard/analysis/index.vue'),
+  component: DashboardAnalysis,
   meta: {
     keepAlive: true,
     requiresAuth: true,
@@ -105,20 +117,7 @@ export const customRoutes: CustomRoute[] = [
     redirect: { name: ROUTE_HOME.name },
     meta: {
       isNotMenu: true
-    },
-    children: [
-      // 重载
-      {
-        name: RouteNameMap.get('reload'),
-        path: EnumRoutePath.reload,
-        component: () => import('@/views/system/reload/index.vue'),
-        meta: {
-          title: EnumRouteTitle.reload,
-          isNotMenu: true,
-          fullPage: true
-        }
-      }
-    ]
+    }
   },
   {
     name: RouteNameMap.get('dashboard'),
@@ -134,8 +133,9 @@ export const customRoutes: CustomRoute[] = [
       {
         name: RouteNameMap.get('dashboard-workbench'),
         path: EnumRoutePath['dashboard-workbench'],
-        component: () => import('@/views/dashboard/workbench/index.vue'),
+        component: DashboardWorkbench,
         meta: {
+          keepAlive: true,
           requiresAuth: true,
           title: EnumRouteTitle['dashboard-workbench']
         }
@@ -155,7 +155,7 @@ export const customRoutes: CustomRoute[] = [
       {
         name: RouteNameMap.get('exception-403'),
         path: EnumRoutePath['exception-403'],
-        component: () => import('@/views/system/exception/403.vue'),
+        component: Exception403,
         meta: {
           requiresAuth: true,
           title: EnumRouteTitle['exception-403'],
@@ -165,7 +165,7 @@ export const customRoutes: CustomRoute[] = [
       {
         name: RouteNameMap.get('exception-404'),
         path: EnumRoutePath['exception-404'],
-        component: () => import('@/views/system/exception/404.vue'),
+        component: Exception404,
         meta: {
           requiresAuth: true,
           title: EnumRouteTitle['exception-404'],
@@ -175,7 +175,7 @@ export const customRoutes: CustomRoute[] = [
       {
         name: RouteNameMap.get('exception-500'),
         path: EnumRoutePath['exception-500'],
-        component: () => import('@/views/system/exception/500.vue'),
+        component: Exception500,
         meta: {
           requiresAuth: true,
           title: EnumRouteTitle['exception-500'],