场景：如下图，有一个页面基本加载一次后都是不更新的，但是其中的状态会更新（即下图红色框中的状态）。需求就是状态不更新的时候缓存页面，监测到状态更新后，先更新内容，再次进行页面缓存，以此类推。
场景图
方案一：（不！可！行！）
思路：在路由元信息中添加一个keepAlive变量，然后根据监测的状态变化动态修改keepAlive变量的值，来达到动态缓存页面。
<keep-alive>
<router-view v-if="$route.meta.keepAlive"> </router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"> </router-view>
结论：经验证，此方法不可行。因为缓存创建后会存在vue的内存中。而动态修改keepAlive变量并不会销毁以及重新创建，因为keep-alive会将组件保存在内存中，而缓存的组件还是一开始创建在内存中的那个，并不因为变量而改变。
而在缓存周期中activated()钩子函数，只会更新数据，不会跟新页面。
方案二：（ok）
思路：使用<keep-alive>中的属性include，include允许组件有条件地缓存。然后动态修改include值即可。因为<keep-alive>组件的实现原理（从源码角度）看，其中有一个watch监听。监视include和exclude，在被修改的时候对cache进行修正。不符合条件的，销毁vnode对应的实例组件，并从cache中移除。
<keep-alive :include="cached" :max="1">
<router-view ></router-view>
</keep-alive>
cached：全局变量
data(){
return{
cached:this.$store.state.cacheArr,
}
}
路由发生变化时，重新获取cached，可根据实际需求进行调整，变更
watch:{
$route:{ //监听路由变化
handler:function (to,from) {
this.cached=this.$store.state.cacheArr;
}
}
},
附
<keep-alive>包裹动态组件的时候，会缓存不活动的组件实例，而不是销毁它们。需要注意的是，<keep-alive>是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件中。
注！意！<keep-alive>是用在其一个直属的子组件被开关的情景，需要配合<router-view>使用。如果你在其中有v-for则不会工作。如果有上述的多个条件性的子元素，<keep-alive>要求同时只有一个子元素被渲染。
参考：https://blog.csdn.net/github_36546211/article/details/78517496
