vue keep-alive 实现详情返回列表保留页面数据

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

实现功能

详情页返回列表页，列表页保留上次浏览位置
其它页面进入到列表表，列表页刷新
当详情页有数据改变时，列表页也要更新该条数据

实现思路

用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();
},