keep-alive页面缓存问题

业务场景：
    现有A，B页面和其他所有页面（以下用C表示）。B页面为缓存页面，meta.keepAlive为true，

当A页面进入B页面后，B页面需要渲染为不缓存的状态（效果等同第一次进入B页面），离开B页面后缓存B页面，也就是说B->A或者B->C都将B页面缓存。只有在特定情况下（A进入B）清除B页面的缓存。

    

以上这种方式，设置了keepAlive为true后，B页面是一直会进行缓存

查阅vue相关文档后搭配了vuex将需要缓存的页面进行管理，以下是添加后的代码：

    

然后在路由导航守卫中对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页面不管怎么样，都不会进行缓存了。接下来的问题就是在什么时候将B页面再加回到keepalive的行列中了。
查看vue-router容易知道，在B页面可以使用beforeRouteEnter组件内守卫来处理，将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页面加入缓存。