vue页面缓存设置,动态设置页面缓存
2019-03-22 本文已影响0人
easy_mark
情景:A页面—>B页面—>C页面,A页面去B页面期望B页面不缓存,B页面去C页面时,期望B页面可以被缓存。(实际场景可以是:A为首页,B为列表页,C为详情页,B滚动翻页后,从C返回B,记录滚动位置。)
通过路由访问钩子设置B页面的keepAlive为true或者false。
离开路由后,判断to.name是否是A的路由名,是的话设置为false,否则设置为true。注意B页面的keepAlive要设置为true。
beforeRouteLeave (to,from,next){
if(to.name==='index'){
from.meta.keepAlive = false
}else{
from.meta.keepAlive = true
}
next()
},
2.通过vuex结合路由的includes功能以及路由钩子函数实现。(推荐,实现起来优雅)
3.声明一个初始化页面状态,内部变量的函数,从a 页面进入执行初始化函数,其余情况不执行。视图依赖数据驱动,所以可以实现效果。