keep-alive

vue-cli v3.0

include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。(在这里写三目运算，来判断是否缓存组件)
max - 数字。最多可以缓存多少组件实例。
<keep-alive> 是用在其一个直属的子组件被开关的情形。如果你在其中有 v-for 则不会工作。
如果有上述的多个条件性的子元素，<keep-alive> 要求同时只有一个子元素被渲染。

<keep-alive include="AboutIndex" max="1" :exclude="isKeepalive?'':'AboutIndex'">
      <router-view/>
</keep-alive>
//AboutIndex 是需要被缓存的组件 是组件name名

 data() {
    return {
        isKeepalive: false,//是否对该组件进行缓存
    };
  },

我这边是使用watch 来判断的路由，根据个人情况来使用。你也可以使用组件路由判断。

  watch: {
    //监听路由 判断是否进行keep-alive动态缓存 
    $route: function(to, from) {
      if (to.name === "detail"||to.name === "about") {
        this.isKeepalive = true;
      }else{
        this.isKeepalive = false;
      }
    }
  },