業(yè)務場景：
? ? 現(xiàn)有A，B頁面和其他所有頁面（以下用C表示）。B頁面為緩存頁面，meta.keepAlive為true，

當A頁面進入B頁面后，B頁面需要渲染為不緩存的狀態(tài)（效果等同第一次進入B頁面），離開B頁面后緩存B頁面，也就是說B->A或者B->C都將B頁面緩存。只有在特定情況下（A進入B）清除B頁面的緩存。

<keep-alive>

????<router-view v-if="$route.meta.keepAlive" />

</keep-alive>

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

以上這種方式，設置了keepAlive為true后，B頁面是一直會進行緩存

查閱vue相關文檔后搭配了vuex將需要緩存的頁面進行管理，以下是添加后的代碼：

<keep-alive :include="cachePages">

????<router-view v-if="$route.meta.keepAlive" />

</keep-alive>

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

然后在路由導航守衛(wèi)中對meta進行處理

const curCachePages = store.getters.cachePages;
router.beforeEach((to, from, next) => {
?????if (to.path === 'B' && from.path === 'A') {
?????????if (curCachePages.indexOf('B') > -1) {
?????????????store.dispatch('remove', 'B');
?????????}
? ? ? }
? ? ? next()
?})

這樣子的話就當A進入B后，B頁面就不會緩存。但是這樣也導致了B頁面不管怎么樣，都不會進行緩存了。接下來的問題就是在什么時候?qū)頁面再加回到keepalive的行列中了。
查看vue-router容易知道，在B頁面可以使用beforeRouteEnter組件內(nèi)守衛(wèi)來處理，將B加回到cachePages中。

beforeRouteEnter (to, from, next) {
?????next(vm => { // 通過 `vm` 訪問組件實例
?????????if (vm.$store.getters.cachePages.indexOf('about') === -1) {
?????????????vm.$store.dispatch('add', 'about');
? ? ? ? ? }
?????})
?}

這樣，不管任何頁面進入到B頁面，當B頁面不在緩存頁面列中時都會將B頁面加入緩存。