vue3 给缓存组件
项目里有这么个需求,有个banner图每次加载很慢,需要缓存,于是第一就想到了keepAlive,那么就动手吧。
网上一搜,基本都是这样的:
<keep-alive>
<router-view v-if="route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!route.meta.keepAlive"></router-view>
然后结合路由,配置 meta: {keeAlive: true}
我必须要说:这样不行!
正确的做法,其实如果你够细心,你会看到控制台已经给你提示了:
<router-view v-slot="{ Component }">
<keep-alive :include="['bannerIndex']">
<component :is="Component" />
</keep-alive>
</router-view>
把以上错误的写法换成控制台给你提示的写法,即可!
如果你需要选择性的缓存某些组件,include
里放入你组件的name 即可;
tips:这样写并不需要在路由里设置keepAlive~