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)    }},复制代码