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