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

Posted 2021-03-21 jianxian

方式有两种

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：匹配的 路由/组件 不会被缓存

include和exclude支持三种方式来有条件的缓存路由：采用逗号分隔的字符串形式，正则形式，数组形式。

正则和数组形式，必须采用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选项，并且没有注册的组件名。

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

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

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

也就是说：当include和exclude同时存在时，exclude生效，include不生效。

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

当组件被exclude匹配，该组件将不会被缓存，不会调用activated 和 deactivated。

 

 

 

 

.