fix: keepAlive

src/layout/components/AppMain.vue

@@ -1,23 +1,16 @@
 <template>
   <router-view v-slot="{ Component, route }">
-    <KeepAlive :include="keepAliveRouteNames">
+    <KeepAlive :include="keepAliveNames">
-      <component
+      <component :is="Component" v-if="!tagStore.reloading" :key="route.fullPath" />
-        :is="Component"
-        v-if="appStore.reloadFlag"
-        :key="appStore.aliveKeys[route.name] || route.fullPath"
-      />
     </KeepAlive>
   </router-view>
 </template>
 
 <script setup>
-import { useAppStore } from '@/store'
+import { useTagsStore } from '@/store'
-import { useRouter } from 'vue-router'
+const tagStore = useTagsStore()
-const appStore = useAppStore()
-const router = useRouter()
 
-const allRoutes = router.getRoutes()
+const keepAliveNames = computed(() => {
-const keepAliveRouteNames = computed(() => {
+  return tagStore.tags.filter((item) => item.keepAlive).map((item) => item.name)
-  return allRoutes.filter((route) => route.meta?.keepAlive).map((route) => route.name)
 })
 </script>

src/layout/components/tags/ContextMenu.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script setup>
-import { useTagsStore, useAppStore } from '@/store'
+import { useTagsStore } from '@/store'
 import { renderIcon } from '@/utils'
 
 const props = defineProps({
@@ -36,7 +36,6 @@ const props = defineProps({
 const emit = defineEmits(['update:show'])
 
 const tagsStore = useTagsStore()
-const appStore = useAppStore()
 
 const options = computed(() => [
   {
@@ -78,11 +77,7 @@ const actionMap = new Map([
   [
     'reload',
     () => {
-      if (route.meta?.keepAlive) {
+      tagsStore.reloadTag(route.path, route.meta?.keepAlive)
-        // 重置keepAlive
-        appStore.setAliveKeys(route.name, +new Date())
-      }
-      appStore.reloadPage()
     },
   ],
   [

src/layout/components/tags/index.vue

@@ -50,7 +50,8 @@ watch(
     const { name, fullPath: path } = route
     const title = route.meta?.title
     const icon = route.meta?.icon
-    tagsStore.addTag({ name, path, title, icon })
+    const keepAlive = route.meta?.keepAlive
+    tagsStore.addTag({ name, path, title, icon, keepAlive })
   },
   { immediate: true }
 )

src/store/modules/app/index.js

@@ -5,34 +5,17 @@ const isDark = useDark()
 export const useAppStore = defineStore('app', {
   state() {
     return {
-      reloadFlag: true,
       collapsed: false,
-      /** keepAlive路由的key，重新赋值可重置keepAlive */
-      aliveKeys: {},
       isDark,
     }
   },
   actions: {
-    async reloadPage() {
-      $loadingBar.start()
-      this.reloadFlag = false
-      await nextTick()
-      this.reloadFlag = true
-
-      setTimeout(() => {
-        document.documentElement.scrollTo({ left: 0, top: 0 })
-        $loadingBar.finish()
-      }, 100)
-    },
     switchCollapsed() {
       this.collapsed = !this.collapsed
     },
     setCollapsed(collapsed) {
       this.collapsed = collapsed
     },
-    setAliveKeys(key, val) {
-      this.aliveKeys[key] = val
-    },
     /** 设置暗黑模式 */
     setDark(isDark) {
       this.isDark = isDark

src/store/modules/tags/index.js

@@ -8,6 +8,7 @@ export const useTagsStore = defineStore('tag', {
     return {
       tags: tags || [],
       activeTag: activeTag || '',
+      reloading: false,
     }
   },
   getters: {
@@ -25,20 +26,32 @@ export const useTagsStore = defineStore('tag', {
       sStorage.set('tags', tags)
     },
     addTag(tag = {}) {
+      if (WITHOUT_TAG_PATHS.includes(tag.path)) return
+      let findItem = this.tags.find((item) => item.path === tag.path)
+      if (findItem) findItem = tag
+      else this.setTags([...this.tags, tag])
       this.setActiveTag(tag.path)
-      if (WITHOUT_TAG_PATHS.includes(tag.path) || this.tags.some((item) => item.path === tag.path))
+    },
-        return
+    async reloadTag(path, keepAlive) {
-      this.setTags([...this.tags, tag])
+      const findItem = this.tags.find((item) => item.path === path)
+      // 更新key可让keepAlive失效
+      if (findItem && keepAlive) findItem.keepAlive = false
+
+      $loadingBar.start()
+      this.reloading = true
+      await nextTick()
+      this.reloading = false
+      findItem.keepAlive = keepAlive
+      setTimeout(() => {
+        document.documentElement.scrollTo({ left: 0, top: 0 })
+        $loadingBar.finish()
+      }, 100)
     },
     removeTag(path) {
-      if (path === this.activeTag) {
-        if (this.activeIndex > 0) {
-          router.push(this.tags[this.activeIndex - 1].path)
-        } else {
-          router.push(this.tags[this.activeIndex + 1].path)
-        }
-      }
       this.setTags(this.tags.filter((tag) => tag.path !== path))
+      if (path === this.activeTag) {
+        router.push(this.tags[this.tags.length - 1].path)
+      }
     },
     removeOther(curPath = this.activeTag) {
       this.setTags(this.tags.filter((tag) => tag.path === curPath))