perf/route (#54)

* perf: router

* perf: route

src/router/index.ts

@@ -2,12 +2,14 @@ import {
   Router,
   createRouter,
   RouteComponent,
-  createWebHashHistory
+  createWebHashHistory,
+  RouteRecordNormalized
 } from "vue-router";
 import { split } from "lodash-es";
 import { i18n } from "/@/plugins/i18n";
-import NProgress from "/@/utils/progress";
 import { openLink } from "/@/utils/link";
+import NProgress from "/@/utils/progress";
+import { useTimeoutFn } from "@vueuse/core";
 import { storageSession, storageLocal } from "/@/utils/storage";
 import { usePermissionStoreHook } from "/@/store/modules/permission";
 
@@ -56,6 +58,52 @@ export const filterTree = data => {
   return newTree;
 };
 
+// 从路由中提取keepAlive为true的name组成数组（此处本项目中并没有用到，只是暴露个方法）
+export const getAliveRoute = () => {
+  const alivePageList = [];
+  const recursiveSearch = treeLists => {
+    if (!treeLists || !treeLists.length) {
+      return;
+    }
+    for (let i = 0; i < treeLists.length; i++) {
+      if (treeLists[i]?.meta?.keepAlive) alivePageList.push(treeLists[i].name);
+      recursiveSearch(treeLists[i].children);
+    }
+  };
+  recursiveSearch(router.options.routes);
+  return alivePageList;
+};
+
+// 处理缓存路由（添加、删除、刷新）
+export const handleAliveRoute = (
+  matched: RouteRecordNormalized[],
+  mode?: string
+) => {
+  switch (mode) {
+    case "add":
+      matched.forEach(v => {
+        usePermissionStoreHook().cacheOperate({ mode: "add", name: v.name });
+      });
+      break;
+    case "delete":
+      usePermissionStoreHook().cacheOperate({
+        mode: "delete",
+        name: matched[matched.length - 1].name
+      });
+      break;
+    default:
+      usePermissionStoreHook().cacheOperate({
+        mode: "delete",
+        name: matched[matched.length - 1].name
+      });
+      useTimeoutFn(() => {
+        matched.forEach(v => {
+          usePermissionStoreHook().cacheOperate({ mode: "add", name: v.name });
+        });
+      }, 100);
+  }
+};
+
 // 过滤后端传来的动态路由 重新生成规范路由
 export const addAsyncRoutes = (arrRoutes: Array<RouteComponent>) => {
   if (!arrRoutes || !arrRoutes.length) return;
@@ -72,6 +120,7 @@ export const addAsyncRoutes = (arrRoutes: Array<RouteComponent>) => {
   return arrRoutes;
 };
 
+// 创建路由实例
 export const router: Router = createRouter({
   history: createWebHashHistory(),
   routes: filterTree(ascending(constantRoutes)).concat(...remainingRouter),
@@ -90,6 +139,7 @@ export const router: Router = createRouter({
   }
 });
 
+// 初始化路由
 export const initRouter = name => {
   return new Promise(resolve => {
     getAsyncRoutes({ name }).then(({ info }) => {
@@ -122,7 +172,7 @@ export const initRouter = name => {
   });
 };
 
-// reset router
+// 重置路由
 export function resetRouter() {
   router.getRoutes().forEach(route => {
     const { name } = route;
@@ -132,9 +182,18 @@ export function resetRouter() {
   });
 }
 
+// 路由白名单
 const whiteList = ["/login", "/register"];
 
 router.beforeEach((to, _from, next) => {
+  if (to.meta?.keepAlive) {
+    const newMatched = to.matched;
+    handleAliveRoute(newMatched, "add");
+    // 页面整体刷新和点击标签页刷新
+    if (_from.name === undefined || _from.name === "redirect") {
+      handleAliveRoute(newMatched);
+    }
+  }
   const name = storageSession.getItem("info");
   NProgress.start();
   const externalLink = to?.redirectedFrom?.fullPath;

src/router/modules/components.ts

@@ -20,6 +20,7 @@ const componentsRouter = {
       meta: {
         title: "message.hsvideo",
         showLink: true,
+        keepAlive: true,
         savedPosition: true
       }
     },
@@ -30,6 +31,7 @@ const componentsRouter = {
       meta: {
         title: "message.hsmap",
         showLink: true,
+        keepAlive: true,
         savedPosition: true
       }
     },

src/router/modules/editor.ts

@@ -2,7 +2,7 @@ import Layout from "/@/layout/index.vue";
 
 const editorRouter = {
   path: "/editor",
-  name: "editor",
+  name: "reEditor",
   component: Layout,
   redirect: "/editor/index",
   meta: {
@@ -15,11 +15,12 @@ const editorRouter = {
   children: [
     {
       path: "/editor/index",
-      name: "editor",
+      name: "reEditor",
       component: () => import("/@/views/editor/index.vue"),
       meta: {
         title: "message.hseditor",
         showLink: true,
+        keepAlive: true,
         savedPosition: true
       }
     }

src/router/modules/nested.ts

@@ -20,6 +20,7 @@ const nestedRouter = {
       meta: {
         title: "message.hsmenu1",
         showLink: true,
+        keepAlive: true,
         savedPosition: false
       },
       redirect: "/nested/menu1/menu1-1",
@@ -31,6 +32,7 @@ const nestedRouter = {
           meta: {
             title: "message.hsmenu1-1",
             showLink: true,
+            keepAlive: true,
             savedPosition: false
           }
         },
@@ -42,6 +44,7 @@ const nestedRouter = {
           meta: {
             title: "message.hsmenu1-2",
             showLink: true,
+            keepAlive: true,
             savedPosition: false
           },
           children: [
@@ -53,6 +56,7 @@ const nestedRouter = {
               meta: {
                 title: "message.hsmenu1-2-1",
                 showLink: true,
+                keepAlive: true,
                 savedPosition: false
               }
             },
@@ -64,6 +68,7 @@ const nestedRouter = {
               meta: {
                 title: "message.hsmenu1-2-2",
                 showLink: true,
+                keepAlive: true,
                 savedPosition: false
               }
             }
@@ -76,6 +81,7 @@ const nestedRouter = {
           meta: {
             title: "message.hsmenu1-3",
             showLink: true,
+            keepAlive: true,
             savedPosition: false
           }
         }
@@ -88,6 +94,7 @@ const nestedRouter = {
       meta: {
         title: "message.hsmenu2",
         showLink: true,
+        keepAlive: true,
         savedPosition: false
       }
     }