fix: 修复关闭页面不清除缓存bug

缓存判断方式更改为includeKey

src/components/meComponent.ts

@@ -45,7 +45,6 @@ export default defineComponent({
       );
       if (props.keepAlive) {
         const index = components.length - 1;
-        console.log(index);
         components.push(h(MeKeepAlive, props.keepAlive, [components[index]]));
       }
       if (props.transition) {

src/layout/components/header/components/tagBar/components/contextmenu.vue

@@ -63,7 +63,7 @@
   </el-popover>
 </template>
 <script setup lang="ts" name="contextmenu">
-import { cloneDeep } from 'lodash';
+import { useRouteStore } from '@/store';
 import { PropType } from 'vue';
 import { RouteLocationNormalized } from 'vue-router';
 const props = defineProps({
@@ -100,69 +100,81 @@ let canCloseFirst = computed(() => {
   const index = tags.value.findIndex((item) => !item.meta.affix);
   return index > -1 ? index : Infinity;
 });
+const closeMenu = async () => {
+  emit('update:visible', false);
+  await nextTick();
+};
+//清除清除tab对应缓存
+const routeStore = useRouteStore();
+const cleanCache = async (start: number, end: number) => {
+  for (let i = start; i <= end; i++) {
+    routeStore.cacheFullPath.delete(tags.value[i].fullPath);
+  }
+};
+// 刷新
 const reload = () => {
-  // 刷新
   router.replace('/redirect/' + encodeURIComponent(props.current.fullPath));
   closeMenu();
 };
+// 关闭当前
 const closeCurrent = async () => {
-  // 关闭当前
   if (tags.value.length === 0 || props.current.meta.affix) {
     return;
   }
   await closeMenu();
   const nowIndex = index.value;
+  cleanCache(index.value, index.value);
   tags.value.splice(index.value, 1);
   emit('update:modelValue', [...tags.value]);
   if (props.current.fullPath === route.fullPath) {
     router.push(tags.value[Math.min(tags.value.length - 1, nowIndex)].fullPath);
   }
 };
+// 关闭左侧
 const closeLeft = async () => {
-  // 关闭左侧
   if (index.value <= canCloseFirst.value) {
     return;
   }
   await closeMenu();
+  cleanCache(canCloseFirst.value, index.value);
   tags.value.splice(canCloseFirst.value, index.value - canCloseFirst.value);
   emit('update:modelValue', [...tags.value]);
   if (tags.value.findIndex((item) => item.fullPath === route.fullPath) === -1) {
     router.push(tags.value[index.value].fullPath);
   }
 };
+// 关闭右侧
 const closeRight = async () => {
-  // 关闭右侧
   if (index.value + 1 === tags.value.length) {
     return;
   }
   await closeMenu();
+  cleanCache(index.value + 1, tags.value.length - 1);
   tags.value.splice(index.value + 1);
   emit('update:modelValue', [...tags.value]);
   if (tags.value.findIndex((item) => item.fullPath === route.fullPath) === -1) {
     router.push(tags.value[index.value].fullPath);
   }
 };
+// 关闭其他
 const closeOther = () => {
-  // 关闭其他
   closeLeft();
   closeRight();
 };
+// 关闭全部
 const closeAll = async () => {
-  // 关闭全部
   if (canCloseFirst.value === Infinity) {
     return;
   }
   await closeMenu();
+  cleanCache(canCloseFirst.value, tags.value.length - 1);
   tags.value.splice(canCloseFirst.value);
   emit('update:modelValue', [...tags.value]);
   if (tags.value.findIndex((item) => item.fullPath === route.fullPath) === -1) {
     router.push(tags.value[tags.value.length - 1].fullPath);
   }
 };
-const closeMenu = async () => {
-  emit('update:visible', false);
-  await nextTick();
-};
+defineExpose({ closeAll, closeCurrent, closeLeft, closeMenu, closeOther, closeRight });
 </script>
 <style lang="scss">
 .me-contextmenu-tooltip {

src/layout/components/page.vue

@@ -19,15 +19,20 @@ const props = defineProps({
   transition: Object as PropType<TransitionProps>,
 });
 const routeStore = useRouteStore();
-const keepAliveProps = reactive<MeKeepAliveProps>({
+const keepAliveProps = computed<MeKeepAliveProps>(() => ({
   max: 30,
-  excludeKey: routeStore.noCacheFullPath,
+  includeKey: [...routeStore.cacheFullPath],
   exclude: 'redirect',
-});
+}));
+
 const route = useRoute();
-watch(route, () => {
-  if (route.meta.noCache) {
-    routeStore.setNoCache(route.fullPath);
-  }
-});
+watch(
+  route,
+  () => {
+    if (!route.meta.noCache) {
+      routeStore.cacheFullPath.add(route.fullPath);
+    }
+  },
+  { immediate: true },
+);
 </script>

src/store/modules/route.ts

@@ -6,7 +6,7 @@ import { RouteRecordRaw } from 'vue-router';
 export default defineStore('route', {
   state: () => ({
     addRoutes: [] as RouteRecordRaw[],
-    noCacheFullPath: [] as Array<string | RegExp>,
+    cacheFullPath: new Set() as Set<string | RegExp>,
   }),
   getters: {
     routes: (state) => constantRoutes.concat(state.addRoutes),
@@ -18,16 +18,5 @@ export default defineStore('route', {
       }
       return this.addRoutes;
     },
-    setNoCache(fullPath: string) {
-      if (!this.noCacheFullPath.includes(fullPath)) {
-        this.noCacheFullPath.push(fullPath);
-      }
-    },
-    removeNoCache(fullPath: string) {
-      const index = this.noCacheFullPath.indexOf(fullPath);
-      if (index > -1) {
-        this.noCacheFullPath.splice(index, 1);
-      }
-    },
   },
 });

src/views/example/pagePermission.vue

@@ -1 +1 @@
-<template>当前页面 admin/editor可见</template>
+<template><div>当前页面 admin/editor可见</div></template>

src/views/redirect.vue

@@ -7,13 +7,6 @@ const route = useRoute();
 const router = useRouter();
 const fullPath = route.params.path as string;
 const routeStore = useRouteStore();
-if (routeStore.noCacheFullPath.includes(fullPath)) {
-  router.replace(fullPath);
-} else {
-  routeStore.setNoCache(fullPath);
-  onMounted(() => {
-    routeStore.removeNoCache(fullPath);
-    router.replace(fullPath);
-  });
-}
+routeStore.cacheFullPath.delete(fullPath);
+router.replace(fullPath);
 </script>