对于vue的 keep-alive 组件，先简单介绍一下：
<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
<component :is="view"></component>
</keep-alive>
<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
<component :is="view"></component>
</keep-alive>
<!-- Array (use `v-bind`) -->
<keep-alive :include="['a', 'b']">
<component :is="view"></component>
</keep-alive>
在项目中，有些页面需要缓存，有些不需要，这就需要使用keep-alive进行相关控制，来达到效果。 一般的使用方法，可能都是下面的这种：
先在路由中配置meta: { keepAlive: true }，然后
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
根据keepAlive的值来进行是否缓存判断。
这种对于常规的页面缓存是有效的。 但是在项目中，一个页面不会一直被缓存的，有时需要重新渲染。比如，一个列表页（a)、详情页(b)和详情扩展页(c)，a -> b页面，a是缓存页，b需要在每次打开时，重新渲染；b -> c页面，此时b需要被缓存，从c返回时，需要b保持不变。 对于这种需求，目前大部分的解决方案是：通过在路由导航守卫中判断b页面如果是前往c页面，则需要缓存，如果前往a页面，则b不需要缓存。
beforeRouteLeave(to, from, next) {
if(to.path.includes('c')) {
from.meta.keepAlive = true;
} else {
from.meta.keepAlive = false;
}
next();
}
这种方式会出现一个问题： 首先，（具体例子，从上到下对于a、b、c），第一次前往c页面时，b确实会被缓存，
但是我们返回a页面，再前往b页面时，会出现一个新的b缓存页，
就算这不影响我们的性能，但是你继续前往c页面时，
我们之前的b被直接销毁，导致返回b页面时，会返回到第一次缓存的页面，而且之后一直都是只回到第一次的页面，
这并不是我们想要看到的。 网上搜罗一番，有说可以在回到a页面时，把缓存的b页面手动销毁，vue提供一个vm.$destroy()的方法，但是这是不被推荐使用的，我们先试一下：
beforeRouteLeave(to, from, next) {
if(to.path.includes('c')) {
from.meta.keepAlive = true;
} else {
from.meta.keepAlive = false;
this.$destroy();
}
next();
}
继续重复一下上面的操作，发现第一次的页面会被缓存，
第二次从a前往b，在前往c之后，b一直会被销毁，无法缓存，有时还会出现没有销毁的情况，导致第一次的缓存一直存在，之后每次还是会销毁b，
[图片上传中...(image-ac4689-1600762988122-1)]
全都不是我们的菜~！！ 通过翻读vue文档中的keep-alive的介绍，注意到了它的一个属性：include，那就换一种写法，在App.vue中，通过监听路由是否是b到a页面，来判断要不要缓存：
<keep-alive :include="keepAlive">
<router-view></router-view>
</keep-alive>
export default {
name: "App",
data() {
return {
keepAlive: ['a', 'b']
}
},
watch: {
$route(to, from) {
// 如果是从b到a页面，则不缓存b
if(from.name === 'b' && to.name === 'a') {
this.keepAlive = ['a']
} else {
this.keepAlive = ['a', 'b']
}
}
}
};
大功告成
