vue组件缓存

 动态组件在切换的过程中，组件的实例都是「重新创建」的，而我们需要保留组件状态。

 为了解决这个问题，你还需要使用 vue 内置组件 <keep-alive>。

<!-- 组件内部-->
<keep-alive>
    <router-view v-if="$route.meta.keepAlive">
        <!-- 这里是会被缓存的视图组件，比如 Home！ -->
    </router-view>
</keep-alive>

<router-view v-if="!$route.meta.keepAlive">
    <!-- 这里是不被缓存的视图组件，比如 Edit！ -->
</router-view>

//router/index.js
export default [
    {
        path: '/',
        name: 'home',
        component: Home,
        meta: {
          keepAlive: true // 需要被缓存
        }
    }, {
        path: '/:id',
        name: 'edit',
        component: Edit,
        meta: {
          keepAlive: false // 不需要被缓存
        }
    }
]

可以选择性的进行组件的缓存

 <keep-alive> 提供了两个属性 include 与 exclude。

1. include：只有名称匹配的组件会被缓存。
2. exclude：任何名称匹配的组件都不会被缓存。

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