vue 返回上一页传参_vue-router go(-1)后退时怎么带参数?

问题已经解决了! (并非回退操作就不能带参数,如有需要的参考此类做法)

业务需求我目前做的是养老服务的互联网产品,在多个页面可以进入“医院列表”页面,选择要服务的医院,然后回退回去。比如“首页”和“预约”都可以进入“医院”页面。这意味着“医院列表页”,并不知道也不需要知道,访问的上一个页面是哪个页面,只需要选择完医院之后返回就可以了。

当然也可以通过传参来告诉医院列表页,上一个页面的name是什么,然后再回退回去。但如果页面多了,想象一下医院列表页的判断代码会有多少?

解决方案

1. 声明一个空的Vue模块eventBusimport Vue from 'vue'/**

* 定义空的vue实例,作为 eventbus实现非父子组件之间的通信(vue2.x中去掉了broadcast)

*/var eventBus = new Vue({});export default eventBus;

2. “医院列表页”通过eventBus.$emit传参给上一个页面import eventBus from '../service/eventbus.js';

methods:{    //列表选中具体医院的点击事件

goback(hospital){        //传递一个map,choiceHospital是key,hospital是value

eventBus.$emit('choiceHospital',hospital);        //调用router回退页面

this.$router.go(-1);

}

}

3. “首页”以及“预约”页面接收参数import eventBus from '../service/eventbus.js';//每次激活时activated(){    //根据key名获取传递回来的参数,data就是map

eventBus.$on('choiceHospital', function(data){        //赋值给首页的附近医院数据模型

this.nearestOrg = data;

}.bind(this));

},

参考

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值