tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 🐛 (keep-alive)重构缓存机制

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

- 将 fullPath 做为组件缓存的 name
This commit is contained in:
zimo493
2025-09-01 11:11:45 +08:00
parent e37a6c5aa4
commit cc3750c128
9 changed files with 128 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/KeepCache/index.vue
View File

@@ -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>

51
src/layouts/components/AppMain/index.vue
View File

@@ -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) {

9
src/layouts/components/TagsView/index.vue
View File

@@ -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);

68
src/store/modules/permission-store.ts
View File

@@ -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;
});
};

56
src/store/modules/tags-view-store.ts
View File

@@ -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,
};
});

17
src/views/demo/multi-level/children/children/level3-1.vue
View File

@@ -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>

17
src/views/demo/multi-level/children/children/level3-2.vue
View File

@@ -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>

13
src/views/demo/multi-level/children/level2.vue
View File

@@ -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>

21
src/views/demo/multi-level/level1.vue
View File

@@ -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>