vue项目如何使用keep-alive实现动态缓存？

Question

我想实现从tagView切换页面的时候，希望页面能够缓存起来，这样切换的时候不会重新实例化组件，当我从tagView关闭页面，然后从menu从新打开的时候，我希望此时页面能够重新实例化。
我能想到的就是在<router-view/>组件上面在加个父组件<keep-alive/>，但是这样有一个问题就是，不管你是从tagView切换页面还是从menu打开页面，页面永远都会被缓存啊！所以很迷惑应该怎么做，请大佬指点。

Answer 1

页面设置：

<keep-alive>
    <router-view v-if="$route.meta.keepAlive">
        <!-- 这里是会被缓存的视图组件 -->
    </router-view>
</keep-alive>

在该页面路由里面设置 meta 属性

 meta: {
            keepAlive: true // 需要被缓存
        }

在tagView组件里面设置 beforeRouteLeave：

 beforeRouteLeave(to, from, next) {
             // 设置下一个路由的 meta
            to.meta.keepAlive = true;  // 让 页面 缓存，即不刷新
            next();
        }

在menu设置：

 beforeRouteLeave(to, from, next) {
            // 设置下一个路由的 meta
            to.meta.keepAlive = false; // 让 页面 不缓存，即刷新
            next();
        }

Answer 2

可以在 keep-alive 中 添加一个动态的 include 或 exclude 来决定是否需要缓存；
类似

    <keep-alive :include="includeList">
      <route-view />
    </keep-alive> 

以下是官方解释：

• include 和 exclude

  The include 和 exclude prop 允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示：

  <!-- 逗号分隔字符串 -->
  <keep-alive include="a,b">
    <component :is="view"></component>
  </keep-alive>
  
  <!-- regex (使用 `v-bind`) -->
  <keep-alive :include="/a|b/">
    <component :is="view"></component>
  </keep-alive>
  
  <!-- Array (使用 `v-bind`) -->
  <keep-alive :include="['a', 'b']">
    <component :is="view"></component>
  </keep-alive> 

  匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。

• max

  最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。

  <keep-alive :max="10">
    <component :is="view"></component>
  </keep-alive>