vue3 给缓存组件

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~