vue3中使用keepAlive缓存路由组件不生效的问题解决

在 Vue 3 中使用 keep-alive 缓存路由组件时，可能会遇到一些问题导致缓存不生效。以下是一些常见的问题及其解决方案：

1. keep-alive 写法错误：
   在 Vue 3 中，使用 keep-alive 需要将 router-view 包裹在 keep-alive 中，并通过插槽传递组件。例如：

   <template>
     <router-view v-slot="{ Component }">
       <keep-alive>
         <component :is="Component" />
       </keep-alive>
     </router-view>
   </template>
   

   这样可以确保页面状态被缓存 。

2. include 属性使用错误：
   keep-alive 的 include 属性需要指定组件的名称，而不是路由的名称。在 Vue 3 中，组件的名称可以通过 <script setup name="ComponentName"> 来指定。例如：

   <script setup name="TemplateAllocation"></script>
   

   然后在 keep-alive 中使用：

   <keep-alive :include="['TemplateAllocation']">
     <component :is="Component"></component>
   </keep-alive>
   

   确保 include 中使用的是组件的名称，而不是路由的名称 。

3. 多层嵌套路由缓存问题：
   在多层嵌套路由中，可以通过将所有 router-view 都通过 keep-alive 包裹起来，并使用 include 或 exclude 属性来判断是否需要缓存。例如：

   <template>
     <router-view v-slot="{ Component }">
       <keep-alive :include="cacheList">
         <component :is="Component" :key="route.fullPath" />
       </keep-alive>
     </router-view>
   </template>
   <script>
   import { useRoute } from 'vue-router'
   import useStore from '@/store';
   import { storeToRefs } from 'pinia';
   const route = useRoute()
   const { tagview } = useStore()
   const { cacheList } = storeToRefs(tagview)
   </script>
   

   这样可以实现嵌套路由的缓存 。

4. 动态组件缓存问题：
   如果多个路由使用同一个组件，可以通过动态修改组件的名称来解决缓存问题。例如：

   <router-view v-slot="{ Component, route }">
     <keep-alive :include="[...visitedViewPaths]">
       <component :is="formatComponentInstance(Component, route)" />
     </keep-alive>
   </router-view>
   <script>
   function formatComponentInstance(Component, route) {
     let wrapper;
     const wrapperName = route.path;
     if (wrapperMap.has(wrapperName)) {
       wrapper = wrapperMap.get(wrapperName);
     } else {
       wrapper = {
         name: wrapperName,
         render() {
           return h(Component);
         }
       };
       wrapperMap.set(wrapperName, wrapper);
     }
     return wrapper;
   }
   const wrapperMap = new Map();
   </script>
   

   这样可以确保每个路由的组件实例都有唯一的名称，从而正确缓存 。

通过以上方法，可以解决 Vue 3 中使用 keep-alive 缓存路由组件不生效的问题。