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