vuekeep-alive列表页缓存详情页返回上一页不刷新,定位到之前位置

合集下载
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

vuekeep-alive列表页缓存详情页返回上⼀页不刷新,定位
到之前位置
需求:
商品列表页⾯浏览,进⼊商品详情,点击返回仍然是之前浏览的位置
实现:
使⽤vue的keep-alive的include属性给组件做动态缓存,从详情页返回不变,从其他页⾯进⼊列表页则刷新
加需要缓存的列表页⾯定义⼀个数据集在vuex
state:{
pageListArr:[]
}
列表页的name为proList ,详情页的name为proDetail ,只有PageListArr包含的字段才会被缓存,如pageListArr.push("proList")
<keep-alive :include="pageListArr">
<router-view></router-view>
</keep-alive>
思路:
在页⾯初始化前,获取来源页⾯的name和要去加载页⾯的name .
在这⾥使⽤全局导航守卫
router.beforeEach((to, from, next) => {
// 来源页⾯name ->
// 去往页⾯name ->
// 如果要跳转的页⾯为商品列表,且不是从商品详情返回或者跳转
if(===`proList`&&!==`proDetail`){
pageListArr.push(`proList`)
}
// 来源为商品页⾯返回列表页⾯
if(===`proList`&&===`proDetail`){
console.log(`不做处理`)
}
})
当多个不同的列表页⾯需要设置缓存时,如分类商品列表,活动商品列表
需要先判断pageListArr是否已缓存某些页⾯,只有从商情详情返回已缓存的列表页才是⽆刷新,未缓存的列表页⾯仍然需要新缓存
总结
以上所述是⼩编给⼤家介绍的vue keep-alive列表页缓存详情页返回上⼀页不刷新,定位到之前位置,希望对⼤家有所帮助,如果⼤家有任何疑问请给我留⾔,⼩编会及时回复⼤家的。

在此也⾮常感谢⼤家对⽹站的⽀持!
如果你觉得本⽂对你有帮助,欢迎转载,烦请注明出处,谢谢!。

相关文档
最新文档