首页 > 其他 > 详细

keep-alive

时间:2017-10-10 15:26:56      阅读:240      评论:0      收藏:0      [点我收藏+]

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值来判断是否加载此组件

keep-alive

原文:http://www.cnblogs.com/yanze/p/7645692.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!