vue中使用keepAlive組件緩存，如何清緩存（有些時候頁面不需要緩存）

項目開發中在用戶由分類頁category進入detail需保存用戶狀態，查閱了Vue官網后，發現vue2.0提供了一個keep-alive組件。

上一篇講了keep-alive的基本用法，現在說說遇到的坑。

先說項目中的配置

 

在App.vue中的設置

 

 在router中增加配置meta

 

 

上面這個設置后發現問題了，從category進入detail頁后，狀態被保存了，返回的時候保存了用戶狀態，達到了預期效果

但問題在於但從category返回到index后，再由index進入category時依然顯示是緩存中的頁面，此刻頁面沒有刷新。

返回index后的組件顯示如下：

 

 

 

分析從index再次進入category時，直接讀取了緩存的里的頁面。

頭大。。。。。。。我的目標只是緩存從category進入detail頁面，其他的時候不緩存。

 

 

解決方案

在category中啟用beforeRouteLeave鈎子函數

beforeRouteLeave中只有從category進入detail時才進行緩存，其他頁面都講category的keepalive設置成false，並銷毀此category組件;

 

 

然而，發現新的問題。。。。。。

第一次操作index--> category ---> detail的時候是理想效果，但當第二次操作返回index后，進行index --> category --> detail --> category時，發現緩存的對象又不對了，從detail返回category時，保存是的第一次進入detail的分類情況。

此刻category的組件顯示如下

 

 

無奈。。。。。對比了第一次和第二次進入頁面情況

 

根據vue-router提供的守衛可在路由中啟用afterEach路由守衛，在afterEach中進行判斷是否第一次進入，非第一次進入頁面情況強制刷新一次category頁面。 

 

以上是我查看的網上解決問題的靈感文章，下面是我再開發中遇到問題的解決過程： （遇到相同問題的小伙伴可以參考下）

一、需求描述

       a. 列表頁（A）、新增表單頁（B）、選擇車位號列表頁（C）

       b . 首先從A跳到B，B是不需要緩存的

       c. 從B跳到C，B需要緩存保存之前填寫的form表單的所有內容

　　（我這邊還有一個編輯頁，需要公用B頁面，只是把內容回顯到B頁面而已，后面再續寫如何回顯B，第一次的進入的時候回顯，C再跳到B則不需要回顯，只需緩存了）

二、解決思路

     a. B路由設置keep-alive: true, 另外增加一個isIndex: false, 用來判斷是否需要清緩存，從列表頁A跳進來就要清，C頁面跳進來則不需要清

　 b. 弄清楚mounted, actived, deactived 三個周期函數的執行過程

　　 組件設置了keep-alive緩存，第一次進來的時候會執行mounted, actived，第二次進入時只會執行actived，不會執行mounted函數了，離開的時候都會執行deactived 

　　必須要清楚這塊，不然清緩存會很痛苦的

三、解決過程及部分代碼結果

　　rounte.js　

{
      path: '/newMonthApply', // 月卡申請新增
      name: 'newMonthApply',
      component: () => import('../views/monthCarApplication/newMonthApply.vue'),
      meta: {
        title: '開通月卡申請',
        keepAlive: true,
        isIndex: false, // 用來清從列表頁進入的緩存
        isEdit: false // 用來判斷是不是當前頁是不是編輯頁，回顯數據
      }
    },

　index.vue (A列表頁)

beforeRouteLeave(to, from, next) {
      if (to.name == 'newMonthApply') {
        to.meta.isIndex = true // 設置inIndex = tre
      }
      next();
    },

　　

newMonthApply.vue  (B頁面)

beforeRouteEnter (to, from, next) {
      next(vm => {
        //因為當鈎子執行前，組件實例還沒被創建
        // vm 就是當前組件的實例相當於上面的 this，所以在 next 方法里你就可以把 vm 當 this 來用了。
        console.log(vm);//當前組件的實例
        if (from.name == 'monthCarApplyDetal' && to.name == "newMonthApply") {
          to.meta.title = "編輯月卡申請"
        }
        // 為div元素重新設置保存的scrollTop值
        document.querySelector('.recordContent').scrollTop = vm.scrollY 
      });
    },
//記錄離開時的位置
beforeRouteLeave (to, from, next) { 
        //保存滾動條元素div的scrollTop值
        this.scrollY = document.querySelector('.recordContent').scrollTop
        console.log('離開時保存滾動條的位置', this.scrollY)    
      next()
    },
mounted() {
      this.textSize = 0
      if (this.$route.query.row != undefined) {
        console.log('===========編輯申請表單信息==============')
        this.rowData = JSON.parse(this.$route.query.row)
        // this.carsInfo = JSON.parse(this.$route.query.carsInfo)
        console.log('rowData', this.rowData)
        this.editDataHandle(this.rowData)
      } else {
        console.log('===========新增申請表單信息監聽2==============')
        this.resetForm()
      }
      this.$nextTick(()=>{
        this.box = document.querySelector('.recordContent')
        this.box.addEventListener('scroll', function(){
          this.scrollY = document.querySelector('.recordContent').scrollTop
          console.log("scrollY", this.scrollY)
        }, false)
      })
    },
activated() {
      console.log('this.$route.meta.isIndex', this.$route.meta.isIndex)
      if (this.$route.meta.isEdit) { // 從編輯頁進去的話需要需要從新填寫表單信息
        if (this.$route.query.row != undefined) { 
          console.log('===========編輯申請表單信息==============')
          this.rowData = JSON.parse(this.$route.query.row)
          // this.carsInfo = JSON.parse(this.$route.query.carsInfo)
          console.log('rowData', this.rowData)
          this.editDataHandle(this.rowData)
        } else {
          console.log('===========新增申請表單信息監聽2==============')
          this.resetForm()
        }
      }
      if (this.$route.meta.isIndex) { //從首頁進入，不需要緩存
        this.resetForm()
        // console.log('rowData', this.rowData)
      }
    },

 

車位號搜索頁.vue (C頁面)

// 從車位頁返回主頁時把主頁的keepAlive值設置為true（要做個判斷，判斷是不是返回到主頁的）
    beforeRouteLeave (to, from, next) {
      if (to.name === 'newMonthCard' || to.name === 'monthCarModify' || to.name === 'newFreeCard' || to.name === 'freeCarModify' || to.name === 'newMonthApply' || to.name === 'newFreeApply') { // 需要緩存
        to.meta.isIndex = false
        to.meta.isEdit = false
      }
      next()
    },