对比keepalive路由缓存设置的2种方式

方式有两种

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

Vue2.1.0之前:

想实现类似的操作，你可以：

1. 配置一下路由元信息

2. 创建两个keep-alive标签

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

    
        
            
        
    
    
        
    
    //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来缓存路由：

匹配规则：

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

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

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

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

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

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

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