标签：red 常用 避免 mode route col reg out 比较
vue2.0提供了keep-alive组件，用来缓存组件，避免多次加载，减少性能消耗。
1.将整个网页缓存起来
<router-view class="view" keep-alive transition transition-mode="out-in"> </router-view>
最常用的方式，用以提高整体的加载速度。
2.缓存部分组件或页面
a.使用include与exclude
<keep-alive include="a,b"> <!--缓存name为a或b的组件--> <component :is="view"></component> </keep-alive> <!-- regex (use v-bind) --> <keep-alive :include="/a|b/"> <!--缓存name正则匹配/a|b/的组件-->
<component :is="view"></component> </keep-alive>
官网推荐的方法
b.使用router.mate
// 这是目前用的比较多的方式 <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view>
router设置:
... routes: [ { path: ‘/‘, redirect: ‘/index‘, component: Index, mate: { keepAlive: true }}, { path: ‘/common‘, component: TestParent, children: [ { path: ‘/test2‘, component: Test2, mate: { keepAlive: true } } ] } .... // 表示index和test2都使用keep-alive
根据router设置中的mate值来判断是否加载此组件
标签：red 常用 避免 mode route col reg out 比较
原文地址：http://www.cnblogs.com/yanze/p/7645692.html
