首页 > 其他 > 详细

Vue路由开启keep-alive缓存页面

时间:2018-01-02 18:26:08      阅读:233      评论:0      收藏:0      [点我收藏+]

mode:hash模式下:

HTML部分:

<template>
  <div id="app">
   <keep-alive>     <!--使用keep-alive会将页面缓存-->
    <router-view v-if="$route.meta.keepAlive"></router-view>
   </keep-alive>  
     <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

 路由部分:

{
	path: ‘/home‘,
	name: ‘首页‘,
	menuShow: true,
	iconCls: ‘home_light.svg‘,
	component: Home,
	meta:{keepAlive:true}
}
页面部分:
//缓存页面
beforeRouteLeave(to, from, next) {    
   // 设置下一个路由的 meta
    to.meta.keepAlive = true; // B 跳转到 A 时,让 A 缓存,即不刷新(代码写在B页面)
    next();
   }



//不缓存页面
beforeRouteLeave(to, from, next) {    
   // 设置下一个路由的 meta
    to.meta.keepAlive = false; // B 跳转到 A 时,让 A 不缓存,即刷新(代码写在B页面)
    next();
   }

  

  

 

Vue路由开启keep-alive缓存页面

原文:https://www.cnblogs.com/wangyunhui/p/8178392.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!