找了很多資料,關(guān)于router的試用無(wú)非是以下兩種:
//指定跳轉(zhuǎn)到user頁(yè)面,可帶參數(shù)
router.go({name: 'user', params: {userId: 1}});
//不知道頁(yè)面名,按歷史記錄跳轉(zhuǎn)到上一頁(yè)(這種情況應(yīng)該怎么帶參數(shù)???)
router.go(-1);
問(wèn)題已經(jīng)解決了! (并非回退操作就不能帶參數(shù),如有需要的參考此類(lèi)做法)
我目前做的是養(yǎng)老服務(wù)的互聯(lián)網(wǎng)產(chǎn)品,在多個(gè)頁(yè)面可以進(jìn)入“醫(yī)院列表”頁(yè)面,選擇要服務(wù)的醫(yī)院,然后回退回去。比如“首頁(yè)”和“預(yù)約”都可以進(jìn)入“醫(yī)院”頁(yè)面。
這意味著“醫(yī)院列表頁(yè)”,并不知道也不需要知道,訪(fǎng)問(wèn)的上一個(gè)頁(yè)面是哪個(gè)頁(yè)面,只需要選擇完醫(yī)院之后返回就可以了。
當(dāng)然也可以通過(guò)傳參來(lái)告訴醫(yī)院列表頁(yè),上一個(gè)頁(yè)面的name是什么,然后再回退回去。但如果頁(yè)面多了,想象一下醫(yī)院列表頁(yè)的判斷代碼會(huì)有多少?
eventBus
import Vue from 'vue'
/**
* 定義空的vue實(shí)例,作為 eventbus實(shí)現(xiàn)非父子組件之間的通信(vue2.x中去掉了broadcast)
*/
var eventBus = new Vue({});
export default eventBus;
eventBus.$emit
傳參給上一個(gè)頁(yè)面import eventBus from '../service/eventbus.js';
methods:{
//列表選中具體醫(yī)院的點(diǎn)擊事件
goback(hospital){
//傳遞一個(gè)map,choiceHospital是key,hospital是value
eventBus.$emit('choiceHospital',hospital);
//調(diào)用router回退頁(yè)面
this.$router.go(-1);
}
}
import eventBus from '../service/eventbus.js';
//每次激活時(shí)
activated(){
//根據(jù)key名獲取傳遞回來(lái)的參數(shù),data就是map
eventBus.$on('choiceHospital', function(data){
//賦值給首頁(yè)的附近醫(yī)院數(shù)據(jù)模型
this.nearestOrg = data;
}.bind(this));
},
vue非父子組件怎么通信
這本來(lái)就違背了歷史記錄的意思,如果是帶上參數(shù)訪(fǎng)問(wèn),那就應(yīng)該是前進(jìn)。
另外SPA又不存在數(shù)據(jù)傳遞的問(wèn)題,為什么后退需要帶參數(shù)?
官網(wǎng) grouter.go(-1) // 后退一步記錄,等同于 history.back() 是無(wú)法帶參數(shù)的
2個(gè)解決辦法: 1. 以路由方式跳轉(zhuǎn)到上一個(gè)頁(yè)面,而非返回 2.可以通過(guò)store或者vuex,實(shí)現(xiàn)數(shù)據(jù)共享。