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

adminVue 路由缓存 ,指定路由缓存,部分路由缓存已关闭评论条评论 48 次浏览





版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

本文链接:https://blog.csdn.net/weixin_42646130/article/details/93333207


一 ,缓存全部路由

在router-view外包裹keep-alive
例: 
	<keep-alive>
      <router-view></router-view>
    </keep-alive>



  • 1
  • 2
  • 3
  • 4
  • 5

二 ,指定路由缓存

使用  include
<keep-alive include="该路由的name名称">
  <router-view></router-view>
</keep-alive>



  • 1
  • 2
  • 3
  • 4

三,存在多个路由时,想缓存部分路由

使用 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>



  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19