使用 keep-alive 的 include 和 exclude 無效的一點注意

最近在使用vue + element-UI開發的後臺管理項目中，優化 keep-alive 的使用方式時遇到了一些問題

優化前使用的 if 判斷來控制頁面是否能夠緩存，這樣作頁面切換的動畫效果不是太理想

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

優化想使用 include 來控制頁面是否能夠緩存，也能夠讓頁面切換起來更流暢些

<transition>
  <keep-alive :include="keepLive">
    <router-view></router-view>
  </keep-alive>
</transition>

<script>
  export default {
    data() {
      return {}
    },
    computed: {
      keepLive() {
        // 此處使用 store getters 計算過的 keepLive 數組
        //（在 store 拿到 routes，循環出 meta 裏面帶有 keepLive: true 的 route 的 name 放到 keepLive）
        return this.$store.getters.keepLive
      }
    }
  }
</script>

路由裏面

export default new Router({
  routes: [
    {
      path: '/a',
      name: 'a',
      component: () => import('src/views/a'),
      meta: { keepAlive: true }
    },
    {
      path: '/b',
      name: 'a',
      component: () => import('src/views/b'),
      meta: { keepAlive: true }
    }
  ]
})

此時，我感受準備工做已經作完了，能夠運行項目看一下效果了。果真，切換動畫是有了，可是查看控制檯，頁面居然沒有了請求！

使用 keep-alive 頁面的請求我是放在 activated 裏面的，此時頁面徹底沒有執行這裏面的代碼

我仔細檢查了代碼，確保沒有遺漏什麼東西，但問題始終沒有解決

我去看了vue 官方文檔 api keep-alive，檢測了 vue 版本大於文檔說的 2.1.0，而後發現了這句話：

匹配首先檢查組件自身的 name 選項，若是 name 選項不可用，則匹配它的局部註冊名稱 (父組件 components 選項的鍵值)。匿名組件不能被匹配。

當時覺得是路由裏面那個 name，而後又檢查了全部路由的 name 屬性，發現也沒遺漏

最後搜到了思否的一個問答vue.js的keep-alive include無效，發現原來是要在組件頁面中聲明 name 屬性

<transition>
  <div class="a">
    ...
  </div>
</transition>

<script>
  export default {
    name: 'a',
    ...
  }
</script>

最終頁面終於能夠正常運行了

也在此作一下筆記，記錄一下遇到的問題