vue中keep-alive路由缓存
<keep-alive> <component v-bind:is="view"></component> </keep-alive>
专属生命周期
activited keep-alive专属,组件被激活时调用
deadctivated keep-alive专属,组件被销毁时调用
用于子组件缓存,可以让子组件缓存还是不缓存
<!-- 失活的组件将会被缓存!--> <keep-alive> <component v-bind:is="currentTabComponent"></component> </keep-alive>
网上找的很不错,
1、直接使用
<keep-alive> <component> <!-- 该组件将被缓存! --> </component> </keep-alive>
- include - 字符串或正则表达,只有匹配的组件会被缓存
- exclude - 字符串或正则表达式,任何匹配的组件都不会被缓存
// 组件 a export default { name: 'a', data () { return {} } }
<keep-alive include="a"> <component> <!-- name 为 a 的组件将被缓存! --> </component> </keep-alive>可以保留它的状态或避免重新渲染
需要router
<keep-alive> <router-view> <!-- 所有路径匹配到的视图组件都会被缓存! --> </router-view> </keep-alive>
- 使用 include/exclude
- 增加 router.meta 属性
// 组件 a export default { name: 'a', data () { return {} } }
<keep-alive include="a"> <router-view> <!-- 只有路径匹配到的视图 a 组件会被缓存! --> </router-view> </keep-alive>
增加router属性
// routes 配置 export default [ { path: '/', name: 'home', component: Home, meta: { keepAlive: true // 需要被缓存 } }, { path: '/:id', name: 'edit', component: Edit, meta: { keepAlive: false // 不需要被缓存 } } ]
<keep-alive> <router-view v-if="$route.meta.keepAlive"> <!-- 这里是会被缓存的视图组件,比如 Home! --> </router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"> <!-- 这里是不被缓存的视图组件,比如 Edit! --> </router-view>
分析一个写的很详细的地方:很详细https://www.jianshu.com/p/0b0222954483
-