天天看點

vue仿美團餓了麼,資料添加删除,頁面自動重新整理顯示最新資料

vue仿美團餓了麼,資料添加删除,頁面自動重新整理顯示最新資料

當點選去支付時産生新的訂單,并跳轉到訂單頁面,且頁面的資料更新。

需要用到provide inject。這種方法主要是将router-view隐藏然後再顯示時,重新整理頁面資料

在app.vue中寫入以下代碼。

provide(){
		return {
			reload:this.reload
		}
	},
           

在methods中定義此方法,isRouterAlive 在data中聲明

methods:{
		reload(){
			this.isRouterAlive = false;
			this.$nextTick(function(){
				this.isRouterAlive = true;
			})
		}
	},
           

在app.vue中用v-if控制顯示隐藏。

<router-view  v-if="isRouterAlive"></router-view>	
           

在需要重新整理的頁面中調用reload方法

inject:['reload'],
           

在點選事件中調用 this.reload();

vue仿美團餓了麼,資料添加删除,頁面自動重新整理顯示最新資料