vue中设置动态缓存keep-alive

首先看项目需求,如果是需要全部组件缓存,每次进去只刷新数据,只需要把路由meta的keepAlive设为true即可。

而在缓存周期中activated()钩子函数,只会更新数据,不会刷新页面。

 但是很多项目的需求并不是这样,是想要动态设置组件是否缓存,换句话说,需要缓存组件的时候缓存,不需要的时候去掉缓存。

网上很多介绍都是用上面图片里面的方法,但是本人亲自试验过,这个方法是不行的。

那么问题来了,怎么办呢?

看过官网介绍的同学肯定见过keep-alive include和exclude,两个的意思刚好相反,include 名称匹配的组件会被缓存,exclude 名称匹配的组件不被缓存。

我在项目中用的是include,如果对exclude 感兴趣可自行了解,这就不做详细的介绍。

cachedViews 则放在store中,如果有需要缓存的组件,push进cachedViews ,不需要缓存的组件在cachedViews 删除即可。

最后加一个watch 监听,每次路由变化的时候从缓存里取cachedViews

 最后提两点注意:

一、cachedViews 一定要放在store 中,并有对应的方法,可以操控增加或者删除组件的缓存。

二、组件缓存的name,即每个vue组件里面的name。

原文地址:https://www.cnblogs.com/alvin553819/p/12717720.html