当前位置: 首页>前端>正文

Vue keep-alive 动态控制页面缓存(动态路由可用)

当我们不用动态路由时,可以用官方文档 keep-alive 的 include 和 exclude,通过组件 name 就可以控制当前页面是否缓存。

在动态路由的页面下,事情复杂了。。
所以我们着重说下这个情况下如何动态控制缓存。

首先,我们为了给每个不同 /:id 缓存,给<router-view>加了 key

Vue keep-alive 动态控制页面缓存(动态路由可用),第1张

(网上比较常用的缓存方式)

到这一步,你会发现每个动态路由都能很好的缓存了,完美。

但是!!

在我们想动态清除缓存的时候

我们再给 keep-alive 加 exclude 时,将 $route.fullPath 传入 exclude 数组
发现他不生效。。。

然后去看了文档。。

Vue keep-alive 动态控制页面缓存(动态路由可用),第2张

(啊这...)

然后我就在网上找怎么清动态路由的某个缓存。。找了一天(半天在刷知乎)
看到了这篇文章 https://wanyaxing.com/blog/20180724141008.html
然后自己试了下,确实可以只清掉当前url缓存!!!
附上清除方法

Vue keep-alive 动态控制页面缓存(动态路由可用),第3张

(这个onlyCleanCache参数一会有用)

所以我们最核心的问题就可以解决了
那么接下来就是业务判断了

由于我们的业务并不只是 A => B => C (假设B为动态路由页)
有的时候会存在 A=> B => C=> A => B => B => B 等等一系列跳转
所以没有办法像文章里讲的给路由配优先级,我就决定在跳转前判断。

那么问题又来了,如何在进入一个页面前清掉这个页面的缓存呢?
大部分人都会想到 vue-router 的路由守卫,我也是这么想的。
我测试了 beforeRouteEnter,然后在 next 的回调里调清除缓存方法

舒服了,执行的很完美,终于可以算是完善的解决方案了。

总结一下总流程就是,在跳转到动态路由之前,带上一个参数
动态路由页面根据参数判断是否需要清缓存

另外还有一些问题我不确定:
在beforeRouteEnter 清除了缓存,会不会影响性能?

附上代码

Vue keep-alive 动态控制页面缓存(动态路由可用),第4张

https://www.xamrdz.com/web/2pz1848586.html

相关文章: