缓存

src/layout/components/ma-tags.vue

@@ -6,7 +6,7 @@
           v-for="tag in tagStore.tags"
           :key="tag.path"
           @contextmenu.prevent="openContextMenu($event, tag)"
-          :class="route.fullPath == tag.path ? 'active' : ''"
+          :class="route.path == tag.path ? 'active' : ''"
           @click="tagJump(tag)">
           <span>
             {{
@@ -132,9 +132,13 @@ watch(
   () => route,
   (r) => {
     if (!notAddTagList.includes(r.name)) {
+      // 检查当前路由是否已经在tagStore.tags中
+      const existingTag = tagStore.tags.find((tag) => tag.path === r.path)
+
+      // 无论路由是否已存在，都调用addTag来确保组件被添加到keepAlive
       addTag({
         name: r.name,
-        path: r.fullPath,
+        path: r.path,
         affix: r.meta.affix,
         title: r.meta.title,
       })

src/layout/components/ma-workerArea.vue

@@ -4,9 +4,8 @@
       <a-watermark :content="appStore.waterMark ? appStore.waterContent : ''">
         <router-view v-slot="{ Component }">
           <transition :name="appStore.animation" mode="out-in">
-            <!-- <keep-alive :include="keepStore.keepAlives"> -->
-            <keep-alive>
-              <component :is="Component" :key="$route.fullPath" v-if="keepStore.show" />
+            <keep-alive :include="keepStore.keepAlives">
+              <component :is="Component" :key="$route.name" v-if="keepStore.show" />
             </keep-alive>
           </transition>
         </router-view>
@@ -17,10 +16,34 @@
 </template>
 
 <script setup>
-import { useAppStore, useKeepAliveStore } from '@/store'
+import { useAppStore, useKeepAliveStore, useTagStore } from '@/store'
+import { useRoute } from 'vue-router'
+import { onMounted, watch } from 'vue'
 import IframeView from './components/iframe-view.vue'
+
 const appStore = useAppStore()
 const keepStore = useKeepAliveStore()
-console.log('keepAlives')
-console.log('keepAlives', keepStore.keepAlives)
+const tagStore = useTagStore()
+const route = useRoute()
+
+// 检查并添加当前路由到keepAlives的函数
+const checkAndAddToKeepAlive = () => {
+  const currentTag = tagStore.tags.find((tag) => tag.path === route.path)
+  if (currentTag && !keepStore.keepAlives.includes(currentTag.name)) {
+    keepStore.addKeepAlive(currentTag)
+  }
+}
+
+// 在组件挂载时检查
+onMounted(() => {
+  checkAndAddToKeepAlive()
+})
+
+// 监听路由变化
+watch(
+  () => route.path,
+  () => {
+    checkAndAddToKeepAlive()
+  }
+)
 </script>

src/layout/index.vue

@@ -1,4 +1,3 @@
-
 <template>
   <a-layout-content class="h-full main-container">
     <columns-layout v-if="appStore.layout === 'columns'" />
@@ -6,7 +5,7 @@
     <banner-layout v-if="appStore.layout === 'banner'" />
     <mixed-layout v-if="appStore.layout === 'mixed'" />
 
-    <setting ref="settingRef"/>
+    <setting ref="settingRef" />
 
     <transition name="ma-slide-down" mode="out-in">
       <system-search ref="systemSearchRef" v-show="appStore.searchOpen" />
@@ -18,49 +17,50 @@
   </a-layout-content>
 </template>
 <script setup>
-  import { onMounted, ref, watch } from 'vue'
-  import { useAppStore, useUserStore } from '@/store'
+import { onMounted, ref, watch } from 'vue'
+import { useAppStore, useUserStore } from '@/store'
 
-  import ColumnsLayout from './components/columns/index.vue'
-  import ClassicLayout from './components/classic/index.vue'
-  import BannerLayout from './components/banner/index.vue'
-  import MixedLayout from './components/mixed/index.vue'
-  import Setting from './setting.vue'
-  import SystemSearch from './search.vue'
-  import MaButtonMenu from './components/ma-buttonMenu.vue'
+import ColumnsLayout from './components/columns/index.vue'
+import ClassicLayout from './components/classic/index.vue'
+import BannerLayout from './components/banner/index.vue'
+import MixedLayout from './components/mixed/index.vue'
+import Setting from './setting.vue'
+import SystemSearch from './search.vue'
+import MaButtonMenu from './components/ma-buttonMenu.vue'
 
-  const appStore = useAppStore()
-  const userStore = useUserStore()
+const appStore = useAppStore()
+const userStore = useUserStore()
 
-  const settingRef = ref()
-  const systemSearchRef = ref()
-  watch(() => appStore.settingOpen, vl => {
+const settingRef = ref()
+const systemSearchRef = ref()
+watch(
+  () => appStore.settingOpen,
+  (vl) => {
     if (vl === true) {
       settingRef.value.open()
       appStore.settingOpen = false
     }
-  })
-
-  const tagExitMaxSize = () => {
-    document.getElementById('app').classList.remove('max-size')
   }
+)
 
-  onMounted(() => {
-    document.addEventListener('keydown', e => {
-      const keyCode = e.keyCode ?? e.which ?? e.charCode
-      const altKey = e.altKey ?? e.metaKey
-      if(altKey && keyCode === 83) {
-        appStore.searchOpen =  true
-        return
-      }
+const tagExitMaxSize = () => {
+  document.getElementById('app').classList.remove('max-size')
+}
 
-      if (keyCode === 27) {
-        appStore.searchOpen = false
-        return
-      }
-    })
-  })
+onMounted(() => {
+  document.addEventListener('keydown', (e) => {
+    const keyCode = e.keyCode ?? e.which ?? e.charCode
+    const altKey = e.altKey ?? e.metaKey
+    if (altKey && keyCode === 83) {
+      appStore.searchOpen = true
+      return
+    }
 
+    if (keyCode === 27) {
+      appStore.searchOpen = false
+      return
+    }
+  })
+})
 </script>
-<style scoped lang="less">
-</style>
+<style scoped lang="less"></style>

src/views/v1/gameLog/hour/index.vue

@@ -186,3 +186,7 @@ onMounted(async () => {
   refresh()
 })
 </script>
+
+<script>
+export default { name: 'v1/channelAnalysis/hour' }
+</script>