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();
  }
全部评论

相关推荐

头像
11-18 16:08
福州大学 Java
影流之主:干10年不被裁,我就能拿别人一年的钱了,日子有盼头了
点赞 评论 收藏
分享
点赞 收藏 评论
分享
牛客网
牛客企业服务