记录vue3 标签导航切换,内容keep-alive缓存

代码摘录

<router-view v-slot=”{ Component }”>

<keep-alive :include=”tagslist”>

<component :is=”Component” v-if=”$route.meta.keepAlive” :key=”$route.name” />

</keep-alive>

</router-view>

关键点:

1.:key=”$route.name” 解决切换空白问题

2.路由route.ts中meta里一定要定义成keepAlive,因为 <keep-alive> </keep-alive>既然是内置组件的话,我想着保持一致比较好,以防出现其他不必要的麻烦。这个当时写成了isKeepAlive后来导致是空白

3.:include=”tagslist” ,这个include的意思是包含的缓存的tagView,所以可以放在watch中监听,当然全部的tagView要做的pinia或者vuex中缓存