對比keep-alive路由緩存設置的2種方式

方式有兩種

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。

 

 

 

 

.