javascript - How to take parameters when going back in vue-router go(-1)?
我想大声告诉你
我想大声告诉你 2017-05-19 10:29:50
0
4
1680
  • I have found a lot of information, and the trials on router are nothing more than the following two:

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

//不知道页面名,按历史记录跳转到上一页(这种情况应该怎么带参数???)
router.go(-1);
我想大声告诉你
我想大声告诉你

reply all(4)
黄舟

The problem has been solved! (It is not a rollback operation, so parameters cannot be taken. If necessary, refer to this method)

Business needs

  • I am currently working on an Internet product for elderly care services. On multiple pages, you can enter the "Hospital List" page, select the hospital you want to serve, and then go back. For example, both "Home" and "Appointment" can enter the "Hospital" page.

This means "hospital list page". You don't know or need to know which page the last page you visited was. You just need to select the hospital and return.
Of course, you can also tell the hospital list page what the name of the previous page is by passing parameters, and then go back. But if there are too many pages, imagine how many judgment codes there will be on the hospital list page?



Solution

1. Declare an empty Vue moduleeventBus
import Vue from 'vue'

/**
 * 定义空的vue实例,作为 eventbus实现非父子组件之间的通信(vue2.x中去掉了broadcast)
 */
var eventBus = new Vue({});
export default eventBus;
2. "Hospital List Page" passes eventBus.$emit to the previous page
import eventBus from '../service/eventbus.js';

methods:{
    //列表选中具体医院的点击事件
    goback(hospital){
        //传递一个map,choiceHospital是key,hospital是value
        eventBus.$emit('choiceHospital',hospital);
        //调用router回退页面
        this.$router.go(-1);
    }
}
3. "Home" and "Reservation" pages receive parameters
import eventBus from '../service/eventbus.js';

//每次激活时
activated(){
    //根据key名获取传递回来的参数,data就是map
    eventBus.$on('choiceHospital', function(data){
        //赋值给首页的附近医院数据模型
        this.nearestOrg = data;
    }.bind(this));
},

Reference

  • How to communicate between vue non-parent-child components

给我你的怀抱

This goes against the meaning of historical records. If it is accessed with parameters, it should be forward.

In addition, SPA does not have the problem of data transmission. Why does backing off need to have parameters?

仅有的幸福

Official website grouter.go(-1) // Go back one step to record, which is equivalent to history.back(). It cannot take parameters.
2 solutions: 1. Jump to the previous page by routing instead of returning 2. Data sharing can be achieved through store or vuex.

某草草

Don’t you use this.$router.back() to go back by yourself? Do you need to determine where it comes from?

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!