vue缓存组件keep-alive用法

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{
        清空页面填写的字段; 防止下次进入还是缓存数据
    }

}