vue-router 之 keep-alive

Posted 2021-01-07 chenglideyueguang

keep-alive 简介

keep-alive是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

router-view 也是一个组件，如果直接被包在 keep-alive 里面，所有路径匹配到的视图组件都会被缓存，例如：

 

// routes 配置
export default [
{
　　path: ‘/‘,
　　name: ‘home‘,
　　component: Home,
　　meta: {
　　　　keepAlive: true // 需要被缓存
　　}
}, {
　　path: ‘/:id‘,
　　name: ‘edit‘,
　　component: Edit,
　　meta: {
　　　　keepAlive: false // 不需要被缓存
　　}
}]

 

 

<transition name="router-fade" mode="out-in">
　　<keep-alive>
　　　　<router-view v-if="$route.meta.keepAlive">
　　　　<!-- 这里是会被缓存的视图组件，比如 Home！ -->
　　　　</router-view>
　　</keep-alive>
</transition>
<transition name="router-fade" mode="out-in">
　　<router-view v-if="!$route.meta.keepAlive">
　　　　<!-- 这里是不被缓存的视图组件，比如 Edit！ -->
　　</router-view>
</transition>