Vue-keepAlive-数据缓存工具实现返回上一个页面浏览的位置

需求分析

背景：
1. 数据列表页，滚动加载数据；
2. 多条数据情况下，点击某一条，进入详细页进行编辑（修改，删除）操作；
3. 保存返回上一页；

在上面的情况下，想要保持在上次浏览位置，并且保持数据是最新的；

---

解决办法

1. 原始的办法：在点击详情页的时候，记住浏览位置，传递参数或者存到本地缓存，然后在详情页操作完毕后，返回的时候，路由守卫可以判断，是否详情页跳转回来的，然后让页面滚动到上次记录的位置；

思路是这样，实际操作很麻烦；
2. 推荐办法：使用 vue 动态组件 keep-alive, 搭配路由守卫函数 beforeRouteLeave，以及 activated 钩子函数；

---

对于钩子函数执行顺序，以及作用详细说明，请参考 vue 组件的生命周期

---

步骤详解

我的步骤是按照开发思路进行的，场景就是从商品列表页——> 商品详细页——> 商品列表（数据缓存）；
开发之前看到网上好多人都是在路由文件里面配置
meta:{keepAlive:true}
但我觉得没有必要，因为列表页不是一直需要缓存数据的，假如从首页进入，则不需要，所以就在路由守卫函数中判断是否需要缓存数据即可；

---

以下代码，使用 list.vue 代表列表页；detail.vue 代表详细页；

场景 1：点击返回，判断路由跳转的是否是需要缓存的列表页：

detail.vue

beforeRouteLeave (to, from, next) {if (to.name === 'M2mBoard') {to.meta.keepAlive = true}
    next()}

由于 keepAlive 是 vue2.0 中内置组件，所以设置页面路由 meta.keepAlive = true 即可缓存数据，路由跳转是利用函数 this.$router.go(-1)；就可以显示在上次浏览的记录位置；

---

场景 2：编辑详细页数据，回到列表页，则需要将修改的数据保存到本地，然后在列表页的缓存数据中，更改显示即可：

detail.vue

beforeRouteLeave (to, from, next) {if (to.name === 'M2mBoard') {to.meta.keepAlive = true}
    if (this.isChange) {
      let changeData = {
        inquiryNo: this.inquiry.inquiryNo,
        inquiryTitle: this.inquiry.inquiryTitle
      }
      window.sessionStorage.setItem('changeData', JSON.stringify(changeData))
    }
    to.meta.isChange = this.isChange
    next()}

列表页中判断一下，是否需要修改数据：

list.vue

activated () {if (this.$route.meta.isChange) {let changeData = JSON.parse(window.sessionStorage.getItem('changeData'))
      this.list.forEach(item => {if (item.inquiryNo === changeData.inquiryNo) {item.inquiryTitle = changeData.inquiryTitle}
      })
    }
  }

activated 钩子函数，在 keep-alive 组件激活时自动执行，判断如果需要修改，从本地取出数据，循环列表数据，找出需要修改的那一条，进行显示数据的修改（因为是临时修改，所以只修改显示的参数即可）；

场景 3：在详细页点击删除该条数据

detail.vue

beforeRouteLeave (to, from, next) {if (to.name === 'M2mBoard' && !this.idDel) {to.meta.keepAlive = true}
    next()}

删除操作，可以排除后直接不用缓存，或者跟修改一样的操作，判断是删除，临时删除，列表中缓存的数据也可以；

---

上面 3 种情况通常会同时出现，所以最后的写法就是：

detail.vue

beforeRouteLeave (to, from, next) {if (to.name === 'M2mBoard' && !this.idDel) {to.meta.keepAlive = true}
    if (this.isChange) {
      let changeData = {
        inquiryNo: this.inquiry.inquiryNo,
        inquiryTitle: this.inquiry.inquiryTitle
      }
      window.sessionStorage.setItem('changeData', JSON.stringify(changeData))
    }
    to.meta.isChange = this.isChange
    next()}

list.vue

beforeRouteLeave (to, from, next) {
    from.meta.keepAlive = false
    next()},
  activated () {if (this.$route.meta.isChange) {let changeData = JSON.parse(window.sessionStorage.getItem('changeData'))
      this.list.forEach(item => {if (item.inquiryNo === changeData.inquiryNo) {item.inquiryTitle = changeData.inquiryTitle}
      })
    }
  }

列表页种路由跳转的时候需要进行 meta.keepAlive = false 操作，防止出现，从 detail.vue 跳转回来后，list.vue 在与其他页面进行路由跳转的时候，始终处于缓存状态，数据不更新现象；

---

注意：在 info.vue 跳转 list.vue 的路由活动最好使用 this.$router.go(-1)，不然回到 list.vue 页面，数据缓存了，但是页面位置不会是上次访问的位置；具体原因还在研究，哈哈哈 …

---

ok，上面就是在项目开发使用中用到的 keep-alive 的整个思路；记录一下，以免忘记，还有欢迎参考与指正。