使用vue-router切换组件时使组件不销毁

默认地，使用vue-router切换组件时，离开的组件会被销毁，新进入地组件会创建。
那么，有时候，我们希望离开的组件不要被销毁。这时就需要使用到keep-alive标签来缓存组件。

1、用keep-alive包裹router-view

1. 在router-view标签外包裹keep-alive
2. 使用v-if来判断一下，否则所有的组件都会销毁或者不销毁。判断的条件来自于路由定义时的meta字段

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

2、定义路由meta字段

如下，DAC_module路径下，有meta字段，且keepAlive的值是true，那么这个路径的路由就会在路由切换时不销毁组件。
而ADC_module路由就会在切换时销毁组件。

{
          path:'/DAC_module',
          component:() => import(/* webpackChunkName: "DacModule" */ '../components/DacModule/DacModule.vue'),
          meta:{ keepAlive: true}
        },
        {
          path:'/ADC_module',
          component:() => import(/* webpackChunkName: "AdcModule" */ '../components/AdcModule/AdcModule.vue'),
        },

3、keep-alive的原理

在created的时候，将需要缓存的vnode节点放到cache中，在render的时候，根据name取出。