项目中使用keep-alive

keep-alive可以实现组件缓存，当组件切换时不会对当前组件进行卸载。

在Vue中，可以使用keep-alive来缓存页面，当组件在keep-alive内被切换时组件的activated、deactivated这两个生命周期钩子函数会被执行

keep-alive有以下三个属性：

• include 字符串或正则表达式，只有名称匹配的组件会被匹配；
• exclude 字符串或正则表达式，任何名称匹配的组件都不会被缓存；
• max 数字，最多可以缓存多少组件实例。

被包裹在keep-alive中的组件的状态将会被保留：

<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</kepp-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

router.js

{
  path: '/',
  name: 'xxx',
  component: ()=>import('../src/views/xxx.vue'),
  meta:{
    keepAlive: true // 需要被缓存
  }
},