码迷,mamicode.com
首页 > 其他好文 > 详细

对比keep-alive路由缓存设置的2种方式

时间:2019-12-22 14:12:32      阅读:101      评论:0      收藏:0      [点我收藏+]

标签:art   com   ima   匹配   一个   组件   匿名   逗号   head   

方式有两种

1、路由元信息(2.1.0版本之前)
2、属性方式(2.1.0版本之后新增)

 

技术图片

 

 

Vue2.1.0之前:

想实现类似的操作,你可以:

  1. 配置一下路由元信息

  2. 创建两个keep-alive标签

  3. 使用v-if通过路由元信息判断缓存哪些路由。

     <keep-alive>
         <router-view v-if="$route.meta.keepAlive">
             <!--这里是会被缓存的路由-->
         </router-view>
     </keep-alive>
     <router-view v-if="!$route.meta.keepAlive">
         <!--因为用的是v-if 所以下面还要创建一个未缓存的路由视图出口-->
     </router-view>
     //router配置
     new Router({
       routes: [
         {
           path: ‘/‘,
           name: ‘home‘,
           component: Home,
           meta: {
             keepAlive: true // 需要被缓存
           }
         },
         {
           path: ‘/:id‘,
           name: ‘edit‘,
           component: Edit,
           meta: {
             keepAlive: false // 不需要被缓存
           }
         }
       ]
     });
    复制代码

Vue2.1.0版本之后:

使用路由元信息的方式,要多创建一个router-view标签,并且每个路由都要配置一个元信息,是可以实现我们想要的效果,但是过于繁琐了点。

幸运的是在Vue2.1.0之后,Vue新增了两个属性配合keep-alive来有条件地缓存 路由/组件。

新增属性:

  • include:匹配的 路由/组件 会被缓存
  • exclude:匹配的 路由/组件 不会被缓存

includeexclude支持三种方式来有条件的缓存路由:采用逗号分隔的字符串形式,正则形式,数组形式。

正则和数组形式,必须采用v-bind形式来使用。

缓存组件的使用方式

    <!-- 逗号分隔字符串 -->
    <keep-alive include="a,b">
      <component :is="view"></component>
    </keep-alive>
    
    <!-- 正则表达式 (使用 `v-bind`) -->
    <keep-alive :include="/a|b/">
      <component :is="view"></component>
    </keep-alive>
    
    <!-- 数组 (使用 `v-bind`) -->
    <keep-alive :include="[‘a‘, ‘b‘]">
      <component :is="view"></component>
    </keep-alive>
复制代码

但更多场景中,我们会使用keep-alive来缓存路由

<keep-alive include=‘a‘>
    <router-view></router-view>
</keep-alive>
复制代码

匹配规则:

  1. 首先匹配组件的name选项,如果name选项不可用。
  2. 则匹配它的局部注册名称。 (父组件 components 选项的键值)
  3. 匿名组件,不可匹配

比如路由组件没有name选项,并且没有注册的组件名。

  1. 只能匹配当前被包裹的组件,不能匹配更下面嵌套的子组件

比如用在路由上,只能匹配路由组件的name选项,不能匹配路由组件里面的嵌套组件的name选项。

  1. 文档:<keep-alive>不会在函数式组件中正常工作,因为它们没有缓存实例。
  2. exclude的优先级大于include

也就是说:当includeexclude同时存在时,exclude生效,include不生效。

  <keep-alive include="a,b" exclude="a">
    <!--只有a不被缓存-->
    <router-view></router-view>
  </keep-alive>
复制代码

当组件被exclude匹配,该组件将不会被缓存,不会调用activateddeactivated

 

 

 

 

.

对比keep-alive路由缓存设置的2种方式

标签:art   com   ima   匹配   一个   组件   匿名   逗号   head   

原文地址:https://www.cnblogs.com/jianxian/p/12079479.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!