需求剖析

背景：
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的全部思绪；纪录一下，以避免遗忘，另有迎接参考与斧正。