vue keep-alive 詳解 include，activated，deactivated 解決前進刷新，回退緩存

vue keep-alive 詳解 include，activated，deactivated解決前進刷新，回退緩存

問題說明：有searchPage => A(搜索頁面)， searchResult => B（搜索結果頁面），goodsDetail => C（詳情頁面） 三個頁面，A頁面輸入搜索條件，進入B頁面，然後跳轉C頁面。
需求：順序要求是A - > B -> C 前進時需要刷新頁面，C -> B 時走緩存，但是每次從A到B都要刷新B頁面。

說明：vue2.0提供了一個keep-alive組件用來緩存組件,避免多次加載相應的組件,減少性能消耗，所以確保vue 版本爲2.0 以上

方案（1）：
使用meta：{keepAlive: true}
1.App.vue

代碼：

<keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>

2.router js
設置meta，說明：需要進行緩存的組件進行設置keepAlive: true 不需要緩存的不設置或者設置keepAlive: false

代碼：

{
      path: '/searchResult',
      name: 'searchResult',
      component: searchResult,
      meta: {
        keepAlive: true
      }
    },

3. searchResult.vue
接下來就是在需要進行緩存的頁面中，使用路由鉤子函數beforeRouteLeave根據條件設置to.meta.keepAlive

代碼：

beforeRouteLeave (to, from, next) {
    if (to.name === 'goodsDetail') {
      if (!from.meta.keepAlive) {
        from.meta.keepAlive = true // 當我們進入到C時開啓對B頁面的緩存
      }
      next()
    } else {
      from.meta.keepAlive = false
      this.$destroy() // 銷燬B的實例
      next()
    }
  }

遇到的問題: C返回到頁面B時，B確實是被緩存了，network也沒有請求，但是我們在返回到A，從A再次進入到B中發現數據並沒有更新，沒有向後臺發送請求，因爲是直接讀取了緩存中的B頁面，我現在的需求是A->B 前進刷新 C->B 後退緩存
原因：注意因爲這裏在返回A頁面時，使用了this.$destory() 對B頁面的實例進行了銷燬造成的。

這種情況的解決辦法： 在從B頁面返回時，使用 beforeRouterEnter 路由鉤子對前一頁面進行刷新
searchPage.vue 代碼：

beforeRouteEnter (to, from, next) {
    if (from.name === 'searchResult') {
      window.location.reload() // 頁面刷新
      next()
    } else {
      next()
    }
  }

如果有條件的進行刷新，可以在next(vm => {}) 中使用vm 對組件進行實例

beforeRouteEnter (to, from, next) {
    if (from.name === 'searchResult') {
      next(vm => {
        // 通過 `vm` 訪問組件實例
        vm.value = ''
      })
      window.location.reload() // 頁面刷新
    } else {
      next()
    }
  }

這種解決辦法親測是沒問題的，B頁面的緩存完美實現，用戶不太好的體驗是頁面的強制刷新，如果不介意不影響也是Ok的。

後來研究keepAlive 的 include 使用，發現的另外一種完美的解決辦法
方案（2）：

1. App.vue
代碼

<template>
  <div id="app">
    <keep-alive :include=includedComponents>
      <router-view></router-view>
    </keep-alive>
    <bottom-tab></bottom-tab>
  </div>
</template>

這裏的includedComponents 不需要加引號

2. App.vue 中 computed

因爲includedComponents 是在computed 中進行實例的

3. store.js
store 中對includedComponents 的狀態更新保存

const state = {
  includedComponents: []
}
const mutations = {
  includedComponents (state, data) {
    state.includedComponents = data
  }
}

4. 需要進行緩存的頁面 searchResult.vue

beforeRouteLeave (to, from, next) {
    if (to.name === 'goodsDetail') {
      this.$store.commit('includedComponents', 'searchResult') // 保存需要進行緩存的頁面searchResult
      next()
    } else {
      this.$store.commit('includedComponents', '')
      next()
    }
  },
  activated () {
    this.$store.commit('includedComponents', 'searchResult')
    console.log('activated')
  },
  deactivated () {
    console.log('deactivated')
  }

keep-alive的生命週期鉤子函數 activated， deactivated

開啓緩存後，第一次進入執行created，activated等，退出時執行deactivated

第二次不執行created等直接執行activated

需要注意的：
使用include和exclude的注意點：
1.建議在每個組件內部添加name:xx，並且name 名字最好和components 中引用組件名不要衝突，不然你會很崩潰。。。

如果有不明白的地方可以給我留言，我會及時回覆你的留言