vue-router 之 keep-alive

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>