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;