fix: 修复关闭左侧、右侧、其他、全部标签页操作时缓存页面并没有销毁问题

package.json

@@ -35,7 +35,7 @@
     "@logicflow/extension": "^1.2.3",
     "@pureadmin/descriptions": "^1.1.1",
     "@pureadmin/table": "^2.0.0",
-    "@pureadmin/utils": "^1.8.7",
+    "@pureadmin/utils": "^1.8.8",
     "@vueuse/core": "^10.0.2",
     "@vueuse/motion": "2.0.0-beta.12",
     "@wangeditor/editor": "^5.1.21",

src/layout/components/tag/index.vue

@@ -4,10 +4,10 @@ import { emitter } from "@/utils/mitt";
 import { RouteConfigs } from "../../types";
 import { useTags } from "../../hooks/useTag";
 import { routerArrays } from "@/layout/types";
+import { handleAliveRoute } from "@/router/utils";
 import { isEqual, isAllEmpty } from "@pureadmin/utils";
 import { useSettingStoreHook } from "@/store/modules/settings";
 import { ref, watch, unref, nextTick, onBeforeMount } from "vue";
-import { handleAliveRoute, delAliveRoutes } from "@/router/utils";
 import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
 import { useResizeObserver, useDebounceFn, useFullscreen } from "@vueuse/core";
 
@@ -170,8 +170,6 @@ function onFresh() {
 }
 
 function deleteDynamicTag(obj: any, current: any, tag?: string) {
-  // 存放被删除的缓存路由
-  let delAliveRouteList = [];
   const valueIndex: number = multiTags.value.findIndex((item: any) => {
     if (item.query) {
       if (item.path === obj.path) {
@@ -194,7 +192,7 @@ function deleteDynamicTag(obj: any, current: any, tag?: string) {
     if (other) {
       useMultiTagsStoreHook().handleTags("equal", [routerArrays[0], obj]);
     } else {
-      delAliveRouteList = useMultiTagsStoreHook().handleTags("splice", "", {
+      useMultiTagsStoreHook().handleTags("splice", "", {
         startIndex,
         length
       }) as any;
@@ -214,10 +212,6 @@ function deleteDynamicTag(obj: any, current: any, tag?: string) {
   }
   const newRoute = useMultiTagsStoreHook().handleTags("slice");
   if (current === route.path) {
-    // 删除缓存路由
-    tag
-      ? delAliveRoutes(delAliveRouteList)
-      : handleAliveRoute(route.matched, "delete");
     // 如果删除当前激活tag就自动切换到最后一个tag
     if (tag === "left") return;
     if (newRoute[0]?.query) {
@@ -228,8 +222,6 @@ function deleteDynamicTag(obj: any, current: any, tag?: string) {
       router.push({ path: newRoute[0].path });
     }
   } else {
-    // 删除缓存路由
-    tag ? delAliveRoutes(delAliveRouteList) : delAliveRoutes([obj]);
     if (!multiTags.value.length) return;
     if (multiTags.value.some(item => item.path === route.path)) return;
     if (newRoute[0]?.query) {
@@ -244,6 +236,7 @@ function deleteDynamicTag(obj: any, current: any, tag?: string) {
 
 function deleteMenu(item, tag?: string) {
   deleteDynamicTag(item, item.path, tag);
+  handleAliveRoute(route as toRouteType);
 }
 
 function onClickDrop(key, item, selectRoute?: RouteConfigs) {
@@ -291,6 +284,7 @@ function onClickDrop(key, item, selectRoute?: RouteConfigs) {
         length: multiTags.value.length
       });
       router.push("/welcome");
+      handleAliveRoute(route as toRouteType);
       break;
     case 6:
       // 整体页面全屏

src/router/index.ts

@@ -98,11 +98,10 @@ const whiteList = ["/login"];
 
 router.beforeEach((to: toRouteType, _from, next) => {
   if (to.meta?.keepAlive) {
-    const newMatched = to.matched;
+    handleAliveRoute(to, "add");
-    handleAliveRoute(newMatched, "add");
     // 页面整体刷新和点击标签页刷新
     if (_from.name === undefined || _from.name === "Redirect") {
-      handleAliveRoute(newMatched);
+      handleAliveRoute(to);
     }
   }
   const userInfo = storageSession().getItem<DataInfo<number>>(sessionKey);

src/router/utils.ts

@@ -3,13 +3,11 @@ import {
   RouteRecordRaw,
   RouteComponent,
   createWebHistory,
-  createWebHashHistory,
+  createWebHashHistory
-  RouteRecordNormalized
 } from "vue-router";
 import { router } from "./index";
 import { isProxy, toRaw } from "vue";
 import { useTimeoutFn } from "@vueuse/core";
-import { RouteConfigs } from "@/layout/types";
 import {
   isString,
   cloneDeep,
@@ -94,16 +92,6 @@ function filterNoPermissionTree(data: RouteComponent[]) {
   return filterChildrenTree(newTree);
 }
 
-/** 批量删除缓存路由(keepalive) */
-function delAliveRoutes(delAliveRouteList: Array<RouteConfigs>) {
-  delAliveRouteList.forEach(route => {
-    usePermissionStoreHook().cacheOperate({
-      mode: "delete",
-      name: route?.name
-    });
-  });
-}
-
 /** 通过path获取父级路径 */
 function getParentPaths(path: string, routes: RouteRecordRaw[]) {
   // 深度遍历查找
@@ -266,27 +254,29 @@ function formatTwoStageRoutes(routesList: RouteRecordRaw[]) {
 }
 
 /** 处理缓存路由（添加、删除、刷新） */
-function handleAliveRoute(matched: RouteRecordNormalized[], mode?: string) {
+function handleAliveRoute({ name }: toRouteType, mode?: string) {
   switch (mode) {
     case "add":
-      matched.forEach(v => {
+      usePermissionStoreHook().cacheOperate({
-        usePermissionStoreHook().cacheOperate({ mode: "add", name: v.name });
+        mode: "add",
+        name
       });
       break;
     case "delete":
       usePermissionStoreHook().cacheOperate({
         mode: "delete",
-        name: matched[matched.length - 1].name
+        name
       });
       break;
     default:
       usePermissionStoreHook().cacheOperate({
         mode: "delete",
-        name: matched[matched.length - 1].name
+        name
       });
       useTimeoutFn(() => {
-        matched.forEach(v => {
+        usePermissionStoreHook().cacheOperate({
-          usePermissionStoreHook().cacheOperate({ mode: "add", name: v.name });
+          mode: "add",
+          name
         });
       }, 100);
   }
@@ -371,7 +361,6 @@ export {
   isOneOfArray,
   getHistoryMode,
   addAsyncRoutes,
-  delAliveRoutes,
   getParentPaths,
   findRouteByPath,
   handleAliveRoute,

src/store/modules/permission.ts

@@ -2,6 +2,8 @@ import { defineStore } from "pinia";
 import { store } from "@/store";
 import { cacheType } from "./types";
 import { constantMenus } from "@/router";
+import { getKeyList } from "@pureadmin/utils";
+import { useMultiTagsStoreHook } from "./multiTags";
 import { ascending, filterTree, filterNoPermissionTree } from "@/router/utils";
 
 export const usePermissionStore = defineStore({
@@ -33,6 +35,20 @@ export const usePermissionStore = defineStore({
           delIndex !== -1 && this.cachePageList.splice(delIndex, 1);
           break;
       }
+      /** 监听缓存页面是否存在于标签页，不存在则删除 */
+      (() => {
+        let cacheLength = this.cachePageList.length;
+        const nameList = getKeyList(useMultiTagsStoreHook().multiTags, "name");
+        while (cacheLength > 0) {
+          nameList.findIndex(v => v === this.cachePageList[cacheLength - 1]) ===
+            -1 &&
+            this.cachePageList.splice(
+              this.cachePageList.indexOf(this.cachePageList[cacheLength - 1]),
+              1
+            );
+          cacheLength--;
+        }
+      })();
     },
     /** 清空缓存页面 */
     clearAllCachePage() {