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

问题描述

问 题

• 找了很多资料，关于router的试用无非是以下两种：

//指定跳转到user页面，可带参数
router.go({name: 'user', params: {userId: 1}});

//不知道页面名，按历史记录跳转到上一页（这种情况应该怎么带参数？？？）
router.go(-1);

解决方案

问题已经解决了！ （并非回退操作就不能带参数，如有需要的参考此类做法）

业务需求

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

这意味着医院列表页，并不知道也不需要知道，访问的上一个页面是哪个页面，只需要选择完医院之后返回就可以了。
当然也可以通过传参来告诉医院列表页，上一个页面的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非父子组件怎么通信

这篇关于javascript - vue-router go(-1)后退时怎么带参数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！