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));
},

参考

回答:

这本来就违背了历史记录的意思,如果是带上参数访问,那就应该是前进。

另外SPA又不存在数据传递的问题,为什么后退需要带参数?

回答:

相当于状态非父子结构的状态管理了

回答:

官网 grouter.go(-1) // 后退一步记录,等同于 history.back() 是无法带参数的
2个解决办法: 1. 以路由方式跳转到上一个页面,而非返回 2.可以通过store或者vuex,实现数据共享。

回答:

你this.$router.back()不就自己回去了,需要判断从哪进来的?

回答:

建议最好不要用 eventBus ,缺点比较多,只能通过类名来识别,单向传递,等等,有很多别的解决方案,vuex 或者 缓存中开一个内存来临时记录也可以

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注