Vue中keep-alive中的缓存和去缓存方法,以及生命周期

通过添加keep-alive标签的包裹可以实现去缓存和缓存
1.include可以设置缓存,keep-alive默认就是缓存的,所以需要缓存无需额外设置

<keep-alive>
	<router-view></router-view>
</keep-alive>

2.去掉缓存,每次进入都重新创建并发起请求等操作


<keep-alive exclude="NotFound">
	<router-view></router-view>
</keep-alive>

exclude中的name1就是需要去掉缓存的组件或者页面的name
在这里插入图片描述
但是实际中exclude也不是特别的好用,偶尔会出现去不掉缓存的情况
这时候可以通过生命周期解决这个问题

正常情况下
无缓存页面生命周期:created->mounted->activated
有缓存页面生命周期:
如果是第一次进入:created->mounted->activated
不是第一次进入:activated

可以将某些方法放入到activated中进行请求,可以实现页面数据的刷新去掉缓存

猜你喜欢

转载自blog.csdn.net/weixin_43797908/article/details/118759957