vue单页面多路由缓存问题,解决多路由前进刷新,后退不刷新问题
同一组件被多次复用,有时需要缓存页面数据有时不需要缓存页面数据,最初想到的方法是利用 keep-alive 来进行页面缓存,经过一番验证发现单纯的用keep-alive是行不通的,原因如下keep-alive 会对已加载过的路由进行缓存,而我同一个页面多次复用显然使用的都是同一个路由,所以在加载过一次之后,之后不管从哪里点击到该页面都是缓存的第一次的数据,这显然不是我们想要的结果。还有...
·
同一组件被多次复用,有时需要缓存页面数据有时不需要缓存页面数据,最初想到的方法是利用 keep-alive 来进行页面缓存,经过一番验证发现单纯的用keep-alive是行不通的,原因如下
keep-alive 会对已加载过的路由进行缓存,而我同一个页面多次复用显然使用的都是同一个路由,所以在加载过一次之后,之后不管从哪里点击到该页面都是缓存的第一次的数据,这显然不是我们想要的结果。
还有一个原因是我所有请求数据的方法都在created里,而created只在实例被初次创建的时候才调用,所以缓存页面之后,created便不会再被执行。
说了这么多,那么到底该如何解决此问题呢,其实也很简单啦。
利用watch监听事件,对路由的变化进行监听,以下是我的代码,仅供参考,有问题欢迎留言
watch: {
//监听路由变化
'$route' (to, from) {
if(to.name == 'visirank1' || from.name == 'visirank1') {
//缓存的无需要重新请求数据的
} else {
//需要重新请求数据的
}
console.log(this.getStatus(this.$route.path))
}
},
methods添加此方法
getStatus (urlStr) {
var urlStrArr = urlStr.split('/')
return urlStrArr[urlStrArr.length - 1]
},
更多推荐
已为社区贡献2条内容
所有评论(0)