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

实现功能

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

实现思路

1. 用keep-alive保留列表页面数据
2. activated钩子函数来更新数据
3. 利用路由守卫判断是否从详情页返回来决定是否更新数据
4. 当详情数据改变时，返回列表后利用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)
    }
},
复制代码