vue3中keepAlive的用法与vue2中存在区别
vue3中的用法
<router-view v-slot="{
Component }">
<transition>
<keep-alive>
<component :is="Component" />
</keep-alive>
</transition>
</router-view>
如果使用下面的v-if切换,请给transition配置key值,且配合使用transition-group
报错写法
<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>
解决方案:配置唯一的key值
<router-view v-slot="{
Component }">
<keep-alive>
<component :is="Component" v-if="Route.meta.keepAlive" :key="Route.meta.keepAliveKey" />
</keep-alive>
<component :is="Component" v-if="!Route.meta.keepAlive"/>
</router-view>
keepalive用法
https://v3.cn.vuejs.org/api/built-in-components.html#keep-alive