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的整个思路；记录一下，以避免忘记，还有欢迎参考与指正。