一 ,緩存全部路由
在router-view外包裹keep-alive
例:
<keep-alive>
<router-view></router-view>
</keep-alive>
二 ,指定路由緩存
使用 include
<keep-alive include="該路由的name名稱">
<router-view></router-view>
</keep-alive>
三,存在多個路由時,想緩存部分路由
使用 meta
在路由中添加下面屬性
meta: {keepAlive: true // 緩存}
meta: {keepAlive:false // 不緩存 }
例:
{
path:'/Distribution',
name:'Distribution',
component: Distribution,
meta: {keepAlive: true // 緩存}
}
然後在頁面
<keep-alive >
//目前進入的路由 meta裡面 keepAlive為true時走這裡
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
//目前進入的路由 meta裡面 keepAlive為false時走這裡 下面 if 判斷進行了取反處理
<router-view v-if="!$route.meta.keepAlive"></router-view>