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 -> 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是否已缓存某些页⾯，只有从商情详情返回已缓存的列表页才是⽆刷新，未缓存的列表页⾯仍然需要新缓存
react router缓存
总结
以上所述是⼩编给⼤家介绍的vue keep-alive列表页缓存详情页返回上⼀页不刷新，定位到之前位置，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！
如果你觉得本⽂对你有帮助，欢迎转载，烦请注明出处，谢谢！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。