作用：

 官方解释：会缓存不活动的组件实例，而不是销毁它们（说白了，就是保存这个页面，使里面的页面内容不被清空）

说明：（ 名称 为组件内部定义的名称）

Props：

include - 字符串或正则表达式。只有名称匹配的组件会被缓存。

exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。

max - 数字。最多可以缓存多少组件实例。

用 keep-alive 包裹的组件将会拥有这两个钩子  activated 和 deactivated

      activated  被 keep-alive 缓存的组件激活时调用。（其实就是进入当前组件的时候会触发）

      activated  被 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>

<!-- 数组 (使用 `v-bind`) -->

<keep-alive :include="['a', 'b']">

  <component :is="view"></component>

</keep-alive>

目前较好的使用方法是

在路由里面配置一个属性keepAlive来控制是否渲染在keep-alive里面，来控制是否缓存页面

<keep-alive>

   <router-view v-if='$route.meta.keepAlive'></router-view>

</keep-alive>

<router-view v-if='!$route.meta.keepAlive'></router-view>

名称