天天看點

Vue 路由緩存 ,指定路由緩存,部分路由緩存

一 ,緩存全部路由

在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>
           

繼續閱讀