vue项目中keep-alive、meta的实际应用

需求：司机库、企业信息管理、设备库三个模块的页面在数据详情页及数据操作页回退到列表页面可以保留用户之前的筛选状态，其他页面无需保留筛选状态
实现：用keep-alive包裹组件router-view，通过$route.meta的keepAlive属性区分需要缓存的页面

需要注意的点：v-if不能加在keep-alive上面会使缓存失效，可以加在router-view上或者在keep-alive上改用include，keep-alive是缓存不活动的组件实例（把router-view里的内容存在组件的data里），不会销毁，如果加上v-if判断，判断值发生改变并为false时缓存会被销毁，组件data里的参数就会被回收。

遇到的问题1：其他列表页切换过来时会依旧停留在筛选状态

解决方法：通过路由守卫改变keepAlive的值

beforeRouteLeave(to, from, next) { 		 //详情页
     if(to.name == 'DeviceLibrary'){
         to.meta.keepAlive = true;      //详情页跳到列表页时，设置列表页路由meta中keepAlive的值为true，让列表页缓存
     }
     next();
},
beforeRouteEnter(to, from, next) {                      //列表页
    next(vm => {
         if(from.name != 'DeviceArchives'){
             to.meta.keepAlive = false;       //如果不是详情页跳转过来，设置列表页路由meta中keepAlive的值为false，不让列表页缓存
         }else{
             to.meta.keepAlive = true;      //如果是详情页跳转过来，设置列表页路由meta中keepAlive的值为true，让列表页缓存
         }
     });
}

遇到的问题2：始终保留了第一次缓存的数据（换个思路，改为不是详情页进入列表页就将搜索框清空并调用列表接口）

beforeRouteEnter(to, from, next) {                      //列表页
    next(vm => {
         if(from.name != 'DeviceArchives'){
             vm.decvalue = '';
             vm.decList();
         }
    });
},

keep-alive生命周期钩子函数：activated、deactivated
初次进入时：created > mounted >activated（被 keep-alive 缓存的组件激活时调用）；退出后触发deactivated。
再次进入：会触发activated；事件挂载的方法等只执行一次的放在 mounted 中；组件每次进去执行的方法放在 activated 中。

v-if 如果条件不满足，会直接不进行渲染。（运行条件很少改变时使用）
v-show 无论条件满不满足都会在初始化的时候编译并渲染，只是不满足条件的元素是会 display:none。（需要频繁切换时使用）