🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# 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> ```