vue仿饿了么美团,购物车页面前进刷新,返回数据不变

前进刷新,返回缓存,主要用到keep-alive。
route.js配置好keepAlive

{
					path: '/shop/order',
					name: 'order',
					component: order,
					meta:{
						type:'login',
						keepAlive:true,
						showFooter:false
					}
				},

app.vue中,前者表示缓存,后者表示未缓存,两者都需要存在。

		<keep-alive >
			<router-view v-if="$route.meta.keepAlive"></router-view>	
		</keep-alive>
		
		<router-view  v-if="!$route.meta.keepAlive"></router-view>	

也可以使用include来实现,include中的值为路由的name。但是多个组件需要缓存时,相对来说没有那么好用

	<keep-alive include="shop">
			<router-view></router-view>
	</keep-alive>

如果在缓存后,返回首页,再次进入要求刷新数据,
可以用钩子函数beforeRouteLeave,如果是a->b,要求a进入b时刷新,且当b进入指定页面才会缓存时。可以在b页面中写上此函数。也可以在a页面中写,在进入指定页面时,改变keepAlive。

beforeRouteLeave(to, from, next) {
  	if(to.path == '/deal' || to.path == '/shop/estimate' || to.path == '/shop/business'){
  		from.meta.keepAlive = true;
  	}else{
  		from.meta.keepAlive = false;
  	}		
  	next();
  }
全部评论

相关推荐

点赞 评论 收藏
分享
废物一个0offer:认真的吗二本本科找人工智能岗位
点赞 评论 收藏
分享
屌丝逆袭咸鱼计划:心态摆好,man,晚点找早点找到最后都是为了提升自己好进正职,努力提升自己才是最关键的😤难道说现在找不到找的太晚了就炸了可以鸡鸡了吗😤早实习晚实习不都是为了以后多积累,大四学长有的秋招进的也不妨碍有的春招进,人生就这样
点赞 评论 收藏
分享
不愿透露姓名的神秘牛友
06-27 20:55
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务