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的整個思路；記錄一下，以避免忘記，還有歡迎參考與指正。