实现功能
- 详情页返回列表页，列表页保留上次浏览位置
- 其它页面进入到列表表，列表页刷新
- 当详情页有数据改变时，列表页也要更新该条数据
实现思路
- 用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)
}
},
以上就是 keep-alive 实现详情返回列表保留页面数据。。。。