一、问题
新增需求,点击浏览器返回按钮或者详情页的返回按钮,需要返回列表页,并保存之前所有的状态。
二、经过
刚开始,用
this.$router.push({
name: 'detailsPage',
params: sendData // sendData是给详情页传的数据信息
})
详情页通过 this.$route.params 信息判断是哪个列表页传过来的,并给二级页面传所需的信息。
为了防止页面刷新,路由中的信息为空,还用sessionstorage存储了路由信息。
后来,发现这种方法太麻烦,需要从vue-router寻找解决方法
三、结果
用 keep-alive 及 scrollBehavior 完美解决。
’第一,在 App.vue文件中,给路由加上 keep-alive
第二,在 路由文件中 :router/index.js,给被要被缓存的页面设置 meta 属性(这里就是列表页),不需要缓存的视图,不用添加
第三,在详情页里面设置 beforeRouteLeave

本文介绍了在Vue项目中,如何处理从详情页返回列表页时保持之前的状态,包括滚动位置、点击和搜索状态。通过使用`keep-alive`和`scrollBehavior`,在不刷新页面的情况下,成功实现了返回列表页时的状态保留和滚动位置恢复。


最低0.47元/天 解锁文章

被折叠的 条评论
为什么被折叠?



