javascript - vue-router go(-1)後退時怎麼帶參數?

Question

• 找了很多資料，關於router的試用無非是以下兩種：

#

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

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

Answer 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非父子組件怎麼通訊

Answer 2

這本來就違背了歷史記錄的意思，如果是帶上參數訪問，那就應該是前進。

另外SPA又不存在資料傳遞的問題，為什麼後退需要帶參數？

Answer 3

官網grouter.go(-1) // 後退一步記錄，等同於history.back() 是無法帶參數的
2個解決方法： 1. 以路由方式跳到上一個頁面，而非返回2.可以透過store或vuex，實現資料共享。

Answer 4

你this.$router.back()不就自己回去了，需要判斷從哪裡進來的？