vue3 使用router4 keepalive问题

最新推荐文章于 2025-04-16 09:30:00 发布

懵懂的程序员小曲

最新推荐文章于 2025-04-16 09:30:00 发布

阅读量2.4k

点赞数 4

文章标签： vue.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_43695464/article/details/119998795

版权

本文详细介绍了在将Vue2项目升级到Vue3过程中，路由和keep-alive组件的更新配置。在Vue3中，keep-alive的用法有所改变，需要在router-view中使用v-slot并配合动态组件。同时，当A、B页面都设置为缓存时，可能导致激活错误。解决方法是在组件中设置key值以确保组件的唯一性，并避免动态修改meta信息。注意，首次加载时由于组件未被缓存，可能会发送请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目从vue2升级到vue3，路由也紧跟着升级到了4，然后在使用keep-alive的时候一直不生效，就去查文档
vue2.x与vue3.0的App.vue配置有差异，在App.vue配置信息如下：
vue2.x中，router-view可整个放入keepalive中，如下：

<template>
	<!-- vue2.x配置 -->
   <keep-alive>
    <router-view v-if="$route.meta.keepAlive" />
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive"/>
</template>

<template>
  <!-- vue3.0配置 -->
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component"  v-if="$route.meta.keepAlive"/>
    </keep-alive>
    <component :is="Component"  v-if="!$route.meta.keepAlive"/>
  </router-view> 
</template>

但是假如按照这样配置，会有一个问题，假如A页面时缓存页面，跳转到B页面也是缓存页面的话就会是报Uncaught (in promise) TypeError: parentComponent.ctx.deactivate is not a function 这个错误
所以 需要再中间中配置key值，来表示组件的唯一性和对应关系，如：:key="$route.path"
而且 不要动态修改to.meta.keepAlive的值控制是否缓存。