美文网首页前端
vue-router go(-1)后退时怎么带参数?

vue-router go(-1)后退时怎么带参数?

作者: keyuan0214 | 来源:发表于2019-03-11 22:03 被阅读0次

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

    业务需求

    • 我目前做的是养老服务的互联网产品,在多个页面可以进入“医院列表”页面,选择要服务的医院,然后回退回去。比如“首页”和“预约”都可以进入“医院”页面。

    这意味着“医院列表页”,并不知道也不需要知道,访问的上一个页面是哪个页面,只需要选择完医院之后返回就可以了。
    当然也可以通过传参来告诉医院列表页,上一个页面的name是什么,然后再回退回去。但如果页面多了,想象一下医院列表页的判断代码会有多少?

    解决方案

    1. 声明一个空的Vue模块eventBus
    import 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));
    },
    

    相关文章

      网友评论

        本文标题:vue-router go(-1)后退时怎么带参数?

        本文链接:https://www.haomeiwen.com/subject/vrwipqtx.html