好资源导航 » 文章资讯 » vue keep-alive列表页缓存详情页返回上一页不刷新,定位到之前位置

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

2023-08-07 10:31:05 80

需求:

商品列表页面浏览,进入商品详情,点击返回仍然是之前浏览的位置

实现:

使用vue的keep-alive的include属性给组件做动态缓存,从详情页返回不变,从其他页面进入列表页则刷新

加需要缓存的列表页面定义一个数据集在vuex

state:{
pageListArr:[]
}

列表页的name为proList,详情页的name为proDetail,只有PageListArr包含的字段才会被缓存,如pageListArr.push("proList")

思路:

在页面初始化前,获取来源页面的name和要去加载页面的name.

在这里使用全局导航守卫

router.beforeEach((to,from,next)=>{
//来源页面name->from.name
//去往页面name->to.name
//如果要跳转的页面为商品列表,且不是从商品详情返回或者跳转
if(to.name===`proList`&&from.name!==`proDetail`){
pageListArr.push(`proList`)
}
//来源为商品页面返回列表页面
if(to.name===`proList`&&from.name===`proDetail`){
console.log(`不做处理`)
}
})

当多个不同的列表页面需要设置缓存时,如分类商品列表,活动商品列表

需要先判断pageListArr是否已缓存某些页面,只有从商情详情返回已缓存的列表页才是无刷新,未缓存的列表页面仍然需要新缓存

总结

以上所述是小编给大家介绍的vuekeep-alive列表页缓存详情页返回上一页不刷新,定位到之前位置，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐

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