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();
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值