最近在使用vue + element-UI開發(fā)的后臺管理項目中按咒，優(yōu)化 keep-alive 的使用方式時遇到了一些問題
優(yōu)化前使用的 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>
優(yōu)化想使用 include 來控制頁面是否可以緩存赚抡，也可以讓頁面切換起來更流暢些
<transition>
<keep-alive :include="keepLive">
<router-view></router-view>
</keep-alive>
</transition>
<script>
export default {
data() {
return {}
},
computed: {
keepLive() {
// 此處使用 store getters 計算過的 keepLive 數(shù)組
//（在 store 拿到 routes，循環(huán)出 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 }
}
]
})
此時肝集，我感覺準備工作已經(jīng)做完了抓谴，可以運行項目看一下效果了虐先。果然怨愤，切換動畫是有了，但是查看控制臺蛹批，頁面竟然沒有了請求撰洗！
使用 keep-alive 頁面的請求我是放在 activated 里面的，此時頁面完全沒有執(zhí)行這里面的代碼
我仔細檢查了代碼腐芍，確保沒有遺漏什么東西差导，但問題始終沒有解決
我去看了vue 官方文檔 api keep-alive，檢測了 vue 版本大于文檔說的 2.1.0猪勇，然后發(fā)現(xiàn)了這句話：
匹配首先檢查組件自身的 name 選項设褐，如果 name 選項不可用，則匹配它的局部注冊名稱 (父組件 components 選項的鍵值)泣刹。匿名組件不能被匹配助析。
當時以為是路由里面那個 name，然后又檢查了所有路由的 name 屬性椅您，發(fā)現(xiàn)也沒遺漏
最后搜到了思否的一個問答vue.js的keep-alive include無效外冀，發(fā)現(xiàn)原來是要在組件頁面中聲明 name 屬性
<transition>
<div class="a">
...
</div>
</transition>
<script>
export default {
name: 'a',
...
}
</script>
最終頁面終于可以正常運行了
也在此做一下筆記，記錄一下遇到的問題
