vue之keep-alive

1.说明

keep-alive用来缓存组件,避免多次加载相应的组件,减少性能消耗

2.食用方法

(1)组件缓存

<keep-alive>
    <component>
          <!-- 组件将被缓存 -->
    </component>
</keep-alive>    

(2)页面被缓存

<!--页面被缓存-->
<keep-alive><router-view></router-view></keep-alive>

(3)使用router.meta(常用)

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

在router.js定义

meta:{  keepAlive:true }

(4)include/exclude

<keep-alive include="a">
  <component :is="view"></component>
</keep-alive>

注意:1.a代表组件的name;2.可以使用正则表达式3.可以使用v-bind绑定