vue使用缓存产生的问题如何解决？

Question

vue中，一个列表页从列表详情页返回需要被缓存，从其他页面进入列表不需要缓存，我在main.js中设置
router.beforeEach((to,from,next)=>{
Vue.prototype.fromurl=from.path;
Vue.prototype.tourl=to.meta;
if(from.path.substr(3,4)=='shop'){
varbostonetop=$(window).scrollTop();
localStorage.setItem("bostonetop",bostonetop)
}
elseif(from.path.substr(3,13)=='special_field'){
varbostonetop=$(window).scrollTop();
localStorage.setItem("bostonetop",bostonetop)
}
if(to.path.substr(3,4)=='shop'){
if(from.path.substr(3,14)=='product_detail'){
//思路是进入列表页并从详情页返回加载缓存，其他不加载缓存
to.meta.keepAlive=true;
varbostonetop=localStorage.getItem("bostonetop")
$('html,body').animate({scrollTop:bostonetop},10);
}
}
elseif(to.path.substr(3,13)=='special_field'){
if(from.path.substr(3,14)=='product_detail'){
to.meta.keepAlive=true;
varbostonetop=localStorage.getItem("bostonetop")
$('html,body').animate({scrollTop:bostonetop},10);
}
}else{
to.meta.keepAlive=false
}
next()
})
App.vue
router.js
{
path:'/t/shop',
name:'shop',
component:shop,
meta:{
keepAlive:true
}
},
RT，思路是进入该列表页并从详情页返回加载缓存，其他不加载缓存。但是实际中所有页面进入该页面中都产生了缓存；这不是我想要的，请问上述问题应该如何解决？如何从其他页面进入该页面不加载缓存并从详情返回加载缓存？

Answer 1

将列表页设置keepAlive:true默认需要缓存beforeRouteEnter钩子中判断from然后决定是否需要重新调用获取数据接口伪代码如下newVue({methods:{//获取列表数据getData(){//数据请求部分省略this.data=res.data;}},beforeRouteEnter(to,from,next){//如果不是从详情页进入此组件if(from.path!=='详情页path'){//组件实例初始化后next(vm=>{//重新获取数据vm.getData()});}//else的情况不用判断.因为之前路由中设置了`keepAlive:true`默认会缓存}})题主可以试试这个思路拙见,不足之处望指出