1 <template> 2 <router-view v-slot="{ Component }"> 3 <keep-alive v-for="cache in cacheKeys" :key="cache"> 4 <component v-if="cache === key" :key="key" :is="Component" /> 5 </keep-alive> 6 <component v-if="!keepAlive" :key="key" :is="Component" /> 7 </router-view> 8 </template> 9 10 <script lang="ts" setup> 11 // 工具 12 import { computed } from "vue"; 13 import { useStore } from "vuex"; 14 import { useRoute } from "vue-router"; 15 16 // 工具实例 17 const store = useStore(); 18 const route = useRoute(); 19 20 // 键值 21 const key = computed(() => { 22 const value = route.meta.key; 23 return typeof value === "function" ? value(route) : (value || route.fullPath); 24 }); 25 26 // 缓存键列表 27 const cacheKeys = computed(() => { 28 return store.getters["tabs/cacheKeys"] as string[]; 29 }); 30 31 // 是否缓存 32 const keepAlive = computed(() => { 33 return cacheKeys.value.includes(key.value); 34 }); 35 </script>
