From cc3750c128dab13982326f25c41739119bda8717 Mon Sep 17 00:00:00 2001
From: zimo493 <2081182432@qq.com>
Date: Mon, 1 Sep 2025 11:11:45 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20:bug:=20(keep-alive)=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E7=BC=93=E5=AD=98=E6=9C=BA=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除 KeepCache 组件，直接在 AppMain 中实现缓存逻辑

- 将 fullPath 做为组件缓存的 name
---
 src/components/KeepCache/index.vue            | 18 -----
 src/layouts/components/AppMain/index.vue      | 51 +++++++++++++-
 src/layouts/components/TagsView/index.vue     |  9 +--
 src/store/modules/permission-store.ts         | 68 +++++++------------
 src/store/modules/tags-view-store.ts          | 56 ++++-----------
 .../children/children/level3-1.vue            | 17 +++--
 .../children/children/level3-2.vue            | 17 +++--
 .../demo/multi-level/children/level2.vue      | 13 ++--
 src/views/demo/multi-level/level1.vue         | 21 ++----
 9 files changed, 128 insertions(+), 142 deletions(-)
 delete mode 100644 src/components/KeepCache/index.vue

diff --git a/src/components/KeepCache/index.vue b/src/components/KeepCache/index.vue
deleted file mode 100644
index 1deaabe6..00000000
--- a/src/components/KeepCache/index.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <router-view>
-    <template #default="{ Component, route }">
-      <transition enter-active-class="animate__animated animate__fadeIn" mode="out-in">
-        <keep-alive :include="tagsViewStore.cachedViews">
-          <component :is="Component" :key="route.path" />
-        </keep-alive>
-      </transition>
-    </template>
-  </router-view>
-</template>
-<script setup lang="ts">
-defineOptions({ name: "KeepCache" });
-
-import { useTagsViewStore } from "@/store";
-
-const tagsViewStore = useTagsViewStore();
-</script>
diff --git a/src/layouts/components/AppMain/index.vue b/src/layouts/components/AppMain/index.vue
index 4a2ae912..1ec6249c 100644
--- a/src/layouts/components/AppMain/index.vue
+++ b/src/layouts/components/AppMain/index.vue
@@ -1,13 +1,58 @@
 <template>
   <section class="app-main" :style="{ height: appMainHeight }">
-    <KeepCache />
+    <router-view>
+      <template #default="{ Component, route }">
+        <transition enter-active-class="animate__animated animate__fadeIn" mode="out-in">
+          <keep-alive :include="cachedViews">
+            <component :is="currentComponent(Component, route)" :key="route.fullPath" />
+          </keep-alive>
+        </transition>
+      </template>
+    </router-view>
   </section>
 </template>
 
 <script setup lang="ts">
-import { useSettingsStore } from "@/store";
+import { type RouteLocationNormalized } from "vue-router";
+import { useSettingsStore, useTagsViewStore } from "@/store";
 import variables from "@/styles/variables.module.scss";
-import KeepCache from "@/components/KeepCache/index.vue";
+import Error404 from "@/views/error/404.vue";
+
+const { cachedViews } = toRefs(useTagsViewStore());
+
+// 当前组件
+const wrapperMap = new Map<string, Component>();
+const currentComponent = (component: Component, route: RouteLocationNormalized) => {
+  if (!component) return;
+
+  const { fullPath: componentName } = route; // 使用路由路径作为组件名称
+  let wrapper = wrapperMap.get(componentName);
+
+  if (!wrapper) {
+    wrapper = {
+      name: componentName,
+      render: () => {
+        try {
+          return h(component);
+        } catch (error) {
+          console.error(`Error rendering component for route: ${componentName}`, error);
+          return h(Error404);
+        }
+      },
+    };
+    wrapperMap.set(componentName, wrapper);
+  }
+
+  // 添加组件数量限制
+  if (wrapperMap.size > 100) {
+    const firstKey = wrapperMap.keys().next().value;
+    if (firstKey) {
+      wrapperMap.delete(firstKey);
+    }
+  }
+
+  return h(wrapper);
+};
 
 const appMainHeight = computed(() => {
   if (useSettingsStore().showTagsView) {
diff --git a/src/layouts/components/TagsView/index.vue b/src/layouts/components/TagsView/index.vue
index 7689b157..4950fa29 100644
--- a/src/layouts/components/TagsView/index.vue
+++ b/src/layouts/components/TagsView/index.vue
@@ -86,14 +86,7 @@ const route = useRoute();
 const permissionStore = usePermissionStore();
 const tagsViewStore = useTagsViewStore();
 
-const visitedViews = ref<TagView[]>([]);
-
-watchEffect(() => {
-  visitedViews.value = tagsViewStore.visitedViews;
-  const names = visitedViews.value.map((item) => item.name).filter(Boolean);
-
-  tagsViewStore.setCacheRoutes(names, permissionStore.allCacheRoutes);
-});
+const { visitedViews } = storeToRefs(tagsViewStore);
 
 // 当前选中的标签
 const selectedTag = ref<TagView | null>(null);
diff --git a/src/store/modules/permission-store.ts b/src/store/modules/permission-store.ts
index 4a3187c2..34a6d824 100644
--- a/src/store/modules/permission-store.ts
+++ b/src/store/modules/permission-store.ts
@@ -15,21 +15,20 @@ export const usePermissionStore = defineStore("permission", () => {
   // 动态路由是否已生成
   const isDynamicRoutesGenerated = ref(false);
 
-  const allCacheRoutes = ref<string[][]>([]);
-
   /**
    * 生成动态路由
    */
   async function generateRoutes(): Promise<RouteRecordRaw[]> {
     try {
       const data = await MenuAPI.getRoutes(); // 获取当前登录人拥有的菜单路由
-      const dynamicRoutes = parseDynamicRoutes(data);
+      const dynamicRoutes = parseDynamicRoutes(processRoutes(data));
 
       routes.value = [...constantRoutes, ...dynamicRoutes];
 
-      setAllCacheRoutes(routes.value);
       isDynamicRoutesGenerated.value = true;
 
+      console.log("dynamicRoutes", dynamicRoutes);
+
       return dynamicRoutes;
     } catch (error) {
       console.error("❌ Failed to generate routes:", error);
@@ -64,33 +63,10 @@ export const usePermissionStore = defineStore("permission", () => {
     isDynamicRoutesGenerated.value = false;
   };
 
-  /**
-   * 获取所有的缓存路由
-   * @param userRoutes 用户路由配置
-   */
-  const setAllCacheRoutes = (userRoutes: RouteRecordRaw[]) => {
-    if (!userRoutes?.length) {
-      allCacheRoutes.value = [];
-
-      return;
-    }
-
-    const result: string[][] = [];
-
-    userRoutes.forEach((route) => {
-      if (route.children?.length) {
-        traverseRoutes(route.children, [], result);
-      }
-    });
-
-    allCacheRoutes.value = result;
-  };
-
   return {
     routes,
     mixLayoutSideMenus,
     isDynamicRoutesGenerated,
-    allCacheRoutes,
     generateRoutes,
     setMixLayoutSideMenus,
     resetRouter,
@@ -109,12 +85,13 @@ const parseDynamicRoutes = (rawRoutes: RouteVO[]): RouteRecordRaw[] => {
   rawRoutes.forEach((route) => {
     const normalizedRoute = { ...route } as RouteRecordRaw;
 
+    // console.log();
+
     // 处理组件路径
     normalizedRoute.component =
       normalizedRoute.component?.toString() === "Layout"
         ? Layout
-        : modules[`../../views/${normalizedRoute.component}.vue`] ||
-          modules["../../views/error-page/404.vue"];
+        : modules[`../../views/${normalizedRoute.component}.vue`];
 
     // 递归解析子路由
     if (normalizedRoute.children) {
@@ -128,24 +105,31 @@ const parseDynamicRoutes = (rawRoutes: RouteVO[]): RouteRecordRaw[] => {
 };
 
 /**
- * 遍历路由树收集缓存路由
- * @param nodes 路由节点
- * @param path 当前路径
- * @param result 结果数组
+ * 去除中间层的路由 `component` 属性
+ * @param routes 路由数组
+ * @param isTopLevel 是否是顶层路由
  */
-const traverseRoutes = (nodes: RouteRecordRaw[], path: string[], result: string[][]) => {
-  nodes.forEach((node) => {
-    const newPath: string[] = node.name ? [...path, String(node.name)] : [...path];
+const processRoutes = (routes: RouteVO[], isTopLevel: boolean = true): RouteVO[] => {
+  return routes.map((route) => {
+    // 创建新对象
+    const newRoute: RouteVO = {
+      path: route.path,
+      name: route.name,
+      children: route.children,
+      meta: { ...route.meta },
+    };
 
-    // 叶子节点且需要缓存
-    if (!node.children?.length && node.meta?.keepAlive) {
-      result.push(newPath);
+    // 如果是顶层或者component不是"Layout"，保留component属性
+    if (isTopLevel || route.component !== "Layout") {
+      newRoute.component = route.component;
     }
 
-    // 递归处理子节点
-    if (node.children?.length) {
-      traverseRoutes(node.children, newPath, result);
+    // 递归处理children，标记为非顶层
+    if (route.children && route.children.length > 0) {
+      newRoute.children = processRoutes(route.children, false);
     }
+
+    return newRoute;
   });
 };
 
diff --git a/src/store/modules/tags-view-store.ts b/src/store/modules/tags-view-store.ts
index d2b2724d..718aae08 100644
--- a/src/store/modules/tags-view-store.ts
+++ b/src/store/modules/tags-view-store.ts
@@ -27,16 +27,15 @@ export const useTagsViewStore = defineStore("tagsView", () => {
   /**
    * 添加缓存视图到缓存视图列表中
    */
-  function addCachedView(view: TagView) {
-    const viewName = view.name;
+  function addCachedView({ fullPath, keepAlive }: TagView) {
     // 如果缓存视图名称已经存在于缓存视图列表中，则不再添加
-    if (cachedViews.value.includes(viewName)) {
+    if (cachedViews.value.includes(fullPath)) {
       return;
     }
 
     // 如果视图需要缓存（keepAlive），则将其路由名称添加到缓存视图列表中
-    if (view.keepAlive) {
-      cachedViews.value.push(viewName);
+    if (keepAlive) {
+      cachedViews.value.push(fullPath);
     }
   }
 
@@ -57,9 +56,9 @@ export const useTagsViewStore = defineStore("tagsView", () => {
   }
 
   function delCachedView(view: TagView) {
-    const viewName = view.name;
+    const { fullPath } = view;
     return new Promise((resolve) => {
-      const index = cachedViews.value.indexOf(viewName);
+      const index = cachedViews.value.indexOf(fullPath);
       if (index > -1) {
         cachedViews.value.splice(index, 1);
       }
@@ -76,9 +75,9 @@ export const useTagsViewStore = defineStore("tagsView", () => {
   }
 
   function delOtherCachedViews(view: TagView) {
-    const viewName = view.name as string;
+    const { fullPath } = view;
     return new Promise((resolve) => {
-      const index = cachedViews.value.indexOf(viewName);
+      const index = cachedViews.value.indexOf(fullPath);
       if (index > -1) {
         cachedViews.value = cachedViews.value.slice(index, index + 1);
       } else {
@@ -136,7 +135,7 @@ export const useTagsViewStore = defineStore("tagsView", () => {
           return true;
         }
 
-        const cacheIndex = cachedViews.value.indexOf(item.name);
+        const cacheIndex = cachedViews.value.indexOf(item.fullPath);
         if (cacheIndex > -1) {
           cachedViews.value.splice(cacheIndex, 1);
         }
@@ -158,6 +157,11 @@ export const useTagsViewStore = defineStore("tagsView", () => {
         if (index <= currIndex || item?.affix) {
           return true;
         }
+        const cacheIndex = cachedViews.value.indexOf(item.fullPath);
+        if (cacheIndex > -1) {
+          cachedViews.value.splice(cacheIndex, 1);
+        }
+        return false;
       });
       resolve({
         visitedViews: [...visitedViews.value],
@@ -232,37 +236,6 @@ export const useTagsViewStore = defineStore("tagsView", () => {
     }
   }
 
-  const setCacheRoutes = (names: string[], allCacheRoutes: string[][]) => {
-    if (!names?.length) {
-      cachedViews.value = [];
-
-      return;
-    }
-
-    cachedViews.value = findAndMergeRouteArrays(allCacheRoutes, names);
-  };
-
-  /**
-   * 查找并合并路由数组
-   * @param data 所有缓存路由数据
-   * @param elements 目标元素
-   * @returns 合并后的路由数组
-   */
-  const findAndMergeRouteArrays = (data: string[][], elements: string[]): string[] => {
-    const foundArrays = elements
-      .map((element) => data.find((arr) => arr.includes(element)))
-      .filter(Boolean) as string[][];
-
-    // 使用Set去重并合并
-    const mergedSet = new Set<string>();
-
-    foundArrays.forEach((arr) => {
-      arr.forEach((item) => mergedSet.add(item));
-    });
-
-    return Array.from(mergedSet);
-  };
-
   return {
     visitedViews,
     cachedViews,
@@ -284,6 +257,5 @@ export const useTagsViewStore = defineStore("tagsView", () => {
     closeCurrentView,
     isActive,
     toLastView,
-    setCacheRoutes,
   };
 });
diff --git a/src/views/demo/multi-level/children/children/level3-1.vue b/src/views/demo/multi-level/children/children/level3-1.vue
index 246ace76..cd84a28d 100644
--- a/src/views/demo/multi-level/children/children/level3-1.vue
+++ b/src/views/demo/multi-level/children/children/level3-1.vue
@@ -1,14 +1,23 @@
 <template>
-  <div flex flex-col gap-20px>
-    <el-alert :closable="false" title="菜单三级-1" type="error" />
-    <el-input v-model="value" placeholder="缓存测试" />
-    <ToDetail />
+  <div class="app-container">
+    <div flex flex-col gap-20px>
+      <MultiLevel1 />
+      <MultiLevel2 />
+      <el-alert :closable="false" title="菜单三级-1" type="error" />
+      <el-input v-model="value" placeholder="缓存测试" />
+      <ToDetail />
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
 import ToDetail from "./detail";
+import MultiLevel1 from "../../level1.vue";
+import MultiLevel2 from "../level2.vue";
 
 defineOptions({ name: "MultiLevel31" });
 
 const value = ref("");
+onMounted(() => {
+  console.log("Multilevel31 onMounted");
+});
 </script>
diff --git a/src/views/demo/multi-level/children/children/level3-2.vue b/src/views/demo/multi-level/children/children/level3-2.vue
index 5e1beae4..f20d3502 100644
--- a/src/views/demo/multi-level/children/children/level3-2.vue
+++ b/src/views/demo/multi-level/children/children/level3-2.vue
@@ -1,14 +1,23 @@
 <template>
-  <div flex flex-col gap-20px>
-    <el-alert :closable="false" title="菜单三级-2" type="warning" />
-    <el-input v-model="value" placeholder="缓存测试" />
-    <ToDetail />
+  <div class="app-container">
+    <div flex flex-col gap-20px>
+      <MultiLevel1 />
+      <MultiLevel2 />
+      <el-alert :closable="false" title="菜单三级-2" type="warning" />
+      <el-input v-model="value" placeholder="缓存测试" />
+      <ToDetail />
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import ToDetail from "./detail";
+import MultiLevel1 from "../../level1.vue";
+import MultiLevel2 from "../level2.vue";
 
 defineOptions({ name: "MultiLevel32" });
 const value = ref("");
+onMounted(() => {
+  console.log("Multilevel32 onMounted");
+});
 </script>
diff --git a/src/views/demo/multi-level/children/level2.vue b/src/views/demo/multi-level/children/level2.vue
index f3de974f..8c9d9513 100644
--- a/src/views/demo/multi-level/children/level2.vue
+++ b/src/views/demo/multi-level/children/level2.vue
@@ -1,10 +1,13 @@
 <template>
-  <div flex flex-col gap-20px>
-    <el-alert :closable="false" title="菜单二级" type="success" />
-    <KeepCache />
-  </div>
+  <el-alert :closable="false" title="菜单二级" type="success" />
+  <el-input v-model="value" placeholder="缓存测试" />
 </template>
 <script setup lang="ts">
-import KeepCache from "@/components/KeepCache/index.vue";
 defineOptions({ name: "MultiLevel2" });
+
+const value = ref("");
+
+onMounted(() => {
+  console.log("MultiLevel2 mounted");
+});
 </script>
diff --git a/src/views/demo/multi-level/level1.vue b/src/views/demo/multi-level/level1.vue
index dc451f0d..caf7a960 100644
--- a/src/views/demo/multi-level/level1.vue
+++ b/src/views/demo/multi-level/level1.vue
@@ -1,21 +1,10 @@
 <template>
-  <div p-30px>
-    <el-link
-      href="https://gitee.com/youlaiorg/vue3-element-admin/blob/master/src/views/demo/multi-level/level1.vue"
-      type="primary"
-      target="_blank"
-      class="mb-10"
-    >
-      示例源码 请点击>>>>
-    </el-link>
-
-    <div flex flex-col gap-20px>
-      <el-alert :closable="false" title="菜单一级" />
-      <KeepCache />
-    </div>
-  </div>
+  <el-alert :closable="false" title="菜单一级" />
 </template>
 <script setup lang="ts">
-import KeepCache from "@/components/KeepCache/index.vue";
 defineOptions({ name: "MultiLevel1" });
+
+onMounted(() => {
+  console.log("MultiLevel1 mounted");
+});
 </script>