Parcourir la source

1.解决二级路由缓存的问题。

jiaxiaoqiang il y a 10 mois
Parent
commit
e87b69edff
2 fichiers modifiés avec 10 ajouts et 3 suppressions
  1. 6 3
      src/layout/components/AppMain/index.vue
  2. 4 0
      src/views/layout/index.vue

+ 6 - 3
src/layout/components/AppMain/index.vue

@@ -1,9 +1,10 @@
 <template>
   <section class="app-main">
+    {{ cachedViews }}
     <div class="main-container">
       <router-view v-slot="{ Component, route }">
-        <keep-alive :include="cachedViews">
-          <component :is="Component" :key="route.path" />
+        <keep-alive :include="[cachedViews]">
+          <component :is="Component" :key="route.name" />
         </keep-alive>
       </router-view>
     </div>
@@ -13,7 +14,9 @@
 <script setup lang="ts">
 import { useTagsViewStore } from "@/store";
 
-const cachedViews = computed(() => useTagsViewStore().cachedViews); // 缓存页面集合
+const cachedViews = computed(() =>
+  useTagsViewStore().cachedViews.concat(["CommonLayout"])
+); // 缓存页面集合
 </script>
 
 <style lang="scss" scoped>

+ 4 - 0
src/views/layout/index.vue

@@ -10,5 +10,9 @@
 <script setup lang="ts">
 import { useTagsViewStore } from "@/store";
 
+defineOptions({
+  name: "CommonLayout",
+});
+
 const cachedViews = computed(() => useTagsViewStore().cachedViews); // 缓存页面集合
 </script>