vue-router 嵌套 keep-alive 缓存失败怎么办?可能是代码嵌套有问题!!!

如果您在开发的时候发现 keepalive 无效，询问ai或上网搜索也没能解决问题，这篇文章可帮助您排除一项错误。

使用技术：

vue3、vue-router

描述问题：

在开发过程中有一项需求是工作中需要切换页面工作，但是现在切换页面后就要需要重新筛选一遍，十分不方便，需要加上页面缓存功能，但是我把路由加入 <keep-alive> 的 include 之后发现没有正常工作，代码如下：

<RouterView v-slot="{ Component, route }">
  <Transition name="slide-right" mode="out-in" appear>
      <keep-alive :include="keepAliveStore.list">
      	// 此时 <div> 在 <keep-alive> 和 <component> 中间
        <div class="w-full h-full">
          <component :is="Component" v-show="!isLink" :key="route.fullPath"/>
        </div>
      </keep-alive>
  </Transition>
</RouterView>

解决方法：

后来对比 vue-router 官网对 keep-alive 进行的描述 官网文档 尝试过多种方法没有解决，但偶尔一次尝试将 <div> 标签从 <keep-alive> 嵌套中移出去就已经正常了，将 <div> 标签从嵌套中移出去后，就可以正常缓存了，更改后的代码如下：

<RouterView v-slot="{ Component, route }">
  <Transition name="slide-right" mode="out-in" appear>
  	// 修改后 <keep-alive> 和 <component> 中没有其他元素，而 <div> 在外层
    <div class="w-full h-full">
      <keep-alive :include="keepAliveStore.list">
          <component :is="Component" v-show="!isLink" :key="route.fullPath"/>
      </keep-alive>
    </div>
  </Transition>
</RouterView>

结论:

使用页面缓存功能的时候 <keep-alive> 和 <component> 两个标签之间不要加入其他元素，会使缓存功能失效