项目从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的值控制是否缓存。
会存在第一次将to.meta.keepAlive设置为true是还是会发送请求,因为第一次是创建组件,没有缓存,需要缓存后,下一次进入才不会发送请求。因为如果最开始进入的时候to.meta.keepAlive值为false的话,渲染的是没有使用keep-alive的组件。