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'){ var bostonetop = $(window).scrollTop();
localStorage.setItem("bostonetop",bostonetop)
} else if(from.path.substr(3,13)=='special_field'){ var bostonetop = $(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; var bostonetop = localStorage.getItem("bostonetop")
$('html,body').animate({scrollTop:bostonetop}, 10);
}
}
else if (to.path.substr(3,13)=='special_field') { if(from.path.substr(3,14)=='product_detail'){
to.meta.keepAlive = true; var bostonetop = localStorage.getItem("bostonetop")
$('html,body').animate({scrollTop:bostonetop}, 10);
}
}else{
to.meta.keepAlive = false
}
next()
})App.vue<template>
<div id="app">
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div></template>router.js { path: '/t/shop',
name: 'shop',
component: shop,
meta: {
keepAlive: true
}
},RT，思路是进入该列表页并从详情页返回加载缓存，其他不加载缓存。但是实际中所有页面进入该页面中都产生了缓存；这不是我想要的，请问上述问题应该如何解决？如何从其他页面进入该页面不加载缓存并从详情返回加载缓存？
2 回答
九州编程
TA贡献1785条经验 获得超4个赞
将列表页设置keepAlive:true
默认需要缓存
beforeRouteEnter钩子中判断from然后决定是否需要重新调用获取数据接口
伪代码如下
new Vue({ methods:{ //获取列表数据
getData(){ //数据请求部分省略
this.data = res.data;
}
},
beforeRouteEnter(to, from, next){ //如果不是从详情页进入此组件
if(from.path !== '详情页path'){ //组件实例初始化后
next(vm => { //重新获取数据
vm.getData()
});
} //else的情况不用判断. 因为之前路由中设置了`keepAlive:true` 默认会缓存
}
})题主可以试试这个思路
拙见,不足之处望指出
添加回答
举报
0/150
提交
取消