vue中 keep-alive 组件的作用以及使用

---

vue中 keep-alive 组件的作用

Keep-alive用来保留组件状态，避免重新渲染。
这个问题同时也可以叫做路由缓存
属性：

• include:字符串或正则表达式。只有匹配的组件会被缓存。
• exclude：字符串或正则表达式。任何匹配的组件都不会被缓存。

比如： 有一个列表页面和一个 详情页面，那么用户就会经常执行打开详情=>返回列表=>打开详情这样的话 列表 和 详情 都是一个频率很高的页面，那么就可以对列表组件使用<keep-alive></keep-alive>进行缓存，这样用户每次返回列表的时候，都能从缓存中快速渲染，而不是重新渲染。

1、全部缓存

使用Keep-alive标签包裹router-view就可以实现全部缓存

<keep-alive>
  <router-view> </router-view>
</keep-alive>

2、缓存单个指定的路由

同样使用Keep-alive标签包裹router-view，在Keep-alive中使用include指定需要缓存的页面的名称即可

<keep-alive include='缓存页面的名称'>
  <router-view> </router-view>
</keep-alive>

3、缓存多个指定路由

需要使用两个router-view两个标签，一个作为缓存的出口一个作为不换缓存的出口，然后在路由配置的时候给缓存的页面加上meta属性，然后设置keepAlive的值

<keep-alive>

  <router-view v-if="$route.meta.keepAlive"></router-view>

</keep-alive>

<router-view v-if="!$route.meta.keepAlive"></router-view>

{
    
    
 path:'/car',
 name:'car',
 component: Car,
 meta: {
    
    keepAlive: true} //true缓存 false不缓存
}