# keep-alive遇见vue-router
## `keep-alive`
是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。
## 它们有两个非常重要的属性:
`include`\- 字符串或正则表达,只有匹配的组件会被缓存
`exclude`\- 字符串或正则表达式,任何匹配的组件都不会被缓存
`max`\- 数字。最多可以缓存多少组件实例。
## 使用
router-view 也是一个组件,如果直接被包在 keep-alive 里面,所有路径匹配到的视图组件都会被缓存:
```
<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
<router-view>
<!---------所有路径匹配到的视图组件都会被缓存--------------->
</router-view>
</keep-alive>
```
```
<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
<router-view>
<!---------所有路径匹配到的视图组件都会被缓存--------------->
</router-view>
</keep-alive>
```