vue缓存组件keepalive用法

keep-alive组件缓存 动态更新组件

<keep-alive include="Register,z_dutySystemAddDuty>
include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
include - 字符串或正则表达式。只有名称匹配的组件会被缓存。

表示缓存 Register，z_dutySystemAddDuty 这两个组件

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

// app.vue
    <keep-alive include="Register,z_dutySystemAddDuty">
      <router-view
        v-if="$route.meta.keepAlive"
        :class="{ 'search-theme': isTheme }"
      ></router-view>
    </keep-alive>

// 路由配置
{
    path: "/z_dutySystem/addDuty",
    name: "z_dutySystemAddDuty",
    meta: {
      title: "值班",
      dutyModule: true,
      keepAlive: true
    },
    component: () =>
      import("@/components/release/z_dutySystem/dutyList/addDuty.vue")
  },

// addDuty组件
created(){};      // 方法只会在第一次执行
activated(){};    // 每次进入都会执行
deactivated(){};  // 每次离开都会执行

实现功能

a 页面表单，选择人员 跳到 b页面; b页面保存到 本地存贮或者 vuex;
返回时 再在 activated()方法中 获取 判断 更新 数据;

缓存 a 页面 跳到b 页面时 不做操作;返回到其他页面时清空填写的数据;
防止下次进入还是缓存了旧数据;
beforeRouteLeave(to, from, next){
    if(to.path == "/b"){

    }else{
        清空页面填写的字段; 防止下次进入还是缓存数据
    }

}