缓存组件

缓存组件的新用法

1.缓存组件的介绍：用来保留组件的状态，避免数据的污染。

2.缓存组件的用法

<!-- 组件内部-->
<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 // 不需要被缓存
        }
      }
    ]

3.组件缓存的另一种用法

　　注意：当组件在缓存组件中切换：他的activated和deactivated这俩个声明周期函数将会被执行

<!--只要将缓存的组件的name名称放到include里面即可-->
<!--不需要缓存的组件的name名称放到exclude里面即可-->
<keep-alive>
    <router-view :exclude="[]" :include="['home']">
    </router-view>
</keep-alive>

//router/index.js
    export default [
      {
        path: '/',
        name: 'home',
        component: Home
      }, {
        path: '/:id',
        name: 'edit',
        component: Edit
      }
    ]