实现功能
- 详情页返回列表页,列表页保留上次浏览位置
- 其它页面进入到列表表,列表页刷新
- 当详情页有数据改变时,列表页也要更新该条数据
实现思路
- 用keep-alive保留列表页面数据
- activated钩子函数来更新数据
- 利用路由守卫判断是否从详情页返回来决定是否更新数据
- 当详情数据改变时,返回列表后利用
vm.$set(vm.list,index,newValue)
或vm.list.splice(i,1)
进行更新
具体实现
1. 设置keepalive
App.vue <keep-alive> <router-view v-if="$route.meta.keepAlive"> </router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive" /> router/index.js { path: ..., name: ..., meta: { title: '列表', keepAlive: true, canKeep:false }, component: ... },
2. 在列表页路由守卫判断是否保留数据,只在详情返回做保留
beforeRouteEnter(to, from, next) { if (from.name == "detail") { to.meta.canKeep = true; } else { to.meta.canKeep = false; } next(); },
3. 在activated中更新数据
activated() { if (!this.$route.meta.canKeep) { // 在这里发送请求,刷新数据 } },
4. 列表更新单条数据
activated() { // 刷新数据 if (!this.$route.meta.canKeep) { ... window.scrollTo(0, 1); } else { // 不刷新数据 但详情页数据有更改时 this.showPackageList.forEach((item,idx) => { if(..){ item.looked = true; // 更新某一条数据 this.$set(this.showPackageList, idx, item); } }) } this.rollingLoad(); },
遇到问题
从详情1返回列表时正常,进入其它页面,返回,列表数据更新,进入详情2,返回列表,此时列表会自动定位到从列表进入详情1时的位置,而不是进入详情2前的位置。
原因
列表只做了数据刷新,位置信息依旧保留,当列表刷新后,如果页面触发过滚动,位置信息得到更新,再次返回则正常,无触发滚动则再次返回会回到第一次定位的位置
解决方法
在列表数据更新后,手动触发滚动
activated() { if (!this.$route.meta.canKeep) { // 刷新数据 // 重置页面位置 window.scrollTo(0,1) } },