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();
  }