使用keep-alive进行页面（组件缓存）

keep-alive是vue的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，不会销毁它们。在组件切换过程中，将状态保留在内存中。

优点

1.防止重复渲染DOM
2.减少加载时间及性能消耗
3.提高用户体验性

参数

• include: 只有名称匹配的组件会被缓存
• exclude: 任何名称匹配的组件都不会被缓存
• max: 数组。最多可以缓存多少个实例组件

使用

include

exclude 使用方法相同

<keep-alive>
    <router-view />  //需要缓存的组件
</keep-alive>
<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <router-view :is="view" />
</keep-alive>
<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <router-view :is="view" />
</keep-alive>
<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <router-view :is="view" />
</keep-alive>
<!-- 只缓存组件name为name1或者name1的组件 -->
<keep-alive include="a,b"> 
  <router-view />
</keep-alive>

include的值，是组件页面中name的值，不是路由router中设置name的值。

如果同时使用include和exclude，则exclude得优先级大于include，下面例子只缓存A，max最多只能缓存5个组件，如果达到这个数组，则在新实例被创建前，以前很久没有访问到的，则自动销毁。

<keep-alive include="A,B" exclude="B" max="5">
  <router-view /> 
</keep-alive>

使用keep-alive后，就会有两个新的生命周期钩子activated和deactivated。

activated

在keep-alive组件激活时调用；

deactivated

在keep-alive组件停用时调用；

直接使用v-if进行判断是否需要缓存

有时候在App.vue页面中，created中获取不到$route，就需要在watch中进行获取。

watch: {
  '$route':function(val) {
    // val 就是路由内的相关信息。有path，name，fullpage
    console.log(val)
  }
}

获取到信息后，可以通过判断实现需要缓存的组件，如果使用其他框架搭建项目，导致项目中没有meta，可自己进行获取。

<keep-alive>
  <route-view v-if="defaPath === '/home/index'" />
</keep-alive>
<route-view v-if="defaPath !== 'homl/index'" :key="key" />

key可以对页面进行刷新，只要地址栏进行改变，当前页面就会重新渲染，执行created中的方法。

computed: {
  key() {
    return this.$route.fullPath
  }
}

如果还是不能达到所需的效果，要注意查看项目中是否存在两个<route-view>，是否都绑定了key值。