bus匯流排是vue中路由跳轉傳遞資料的常用方法，適用於傳遞資料不多的情況，但是在使用的過程中發現，bus匯流排在第一次路由跳轉的時候總是不能夠成功傳遞需要傳遞的資料。檢查bus的配置以及呼叫方法，均沒有出錯，錯就錯在沒有理解Vue的生命週期！！！

我們知道bus的$on的監聽應該位於$emit之前，如果在emit之前沒有建立監聽事件，那麼肯定是得不到需要的資料。因此，我通過兩個頁面來了解路由跳轉時兩個頁面的生命週期，下面給出其中一個頁面的部分程式碼：

 //頁面1
 beforeCreate () {
  console.group('%c%s','color:red','beforeCreate 建立前狀態===============元件1》')
 },created () {
  console.group('%c%s','created 建立完畢狀態===============元件1》')
 },beforeMount () {
  console.group('%c%s','beforeMount 掛載前狀態===============元件1》')
 },mounted () {
  console.group('%c%s','mounted 掛載狀態===============元件1》')
 },beforeUpdate () {
  console.group('%c%s','beforeUpdate 更新前狀態===============元件1》')
 },updated () {
  console.group('%c%s','updated 更新狀態===============元件1》')
 },beforeDestroy () {
  console.group('%c%s','beforeDestroy 破前狀態===============元件1》')
 },destroyed () {
  console.group('%c%s','destroyed 破壞狀態===============元件1》')
 }

當從頁面1跳轉到頁面2的時候，控制檯的列印情況如下：

從上圖便可以發現，bus第一次使用無法傳遞的原因：

在頁面1通過$emit方法傳遞資料然後跳轉路由的時候，其實頁面2的$on監聽還沒有建立，因此無法得到資料！

基於上述原因，提出的解決辦法如下：

在頁面1的beforeDestroy或者destroyed鉤子函式中emit資料，在頁面2的beforeCreate、created或者beforeMount鉤子函式中建立$on監聽事件，然後在頁面2的mounted鉤子函式中$on得到的資料賦值給頁面2的變數中。

//頁面1
 beforeDestroy () {
  bus.$emit('dataFromBus1',this.dataFromBus1);
 },//頁面2
  beforeCreate () {
  bus.$on('dataFromBus1',function(url){
   bus.dataFromBus1 = url
  });  
 },mounted () {
  this.dataFromBus1 = bus.dataFromBus1;  
 },

可以發現，第一次跳轉的時候頁面2就能夠得到傳遞的資料！！！

這個坑應該是使用bus必須會 踩到的，希望下次使用的時候能夠留個心眼！！！

補充知識：vue非父子元件傳值（bus）遇到的坑

控制檯可以打印出傳遞過來的值，但就是不會渲染到頁面上那麼重點來了！！！

在A銷燬之前，B元件的beforeCreate ，created，和beforeMount這三個鉤子函式先觸發，之後才是A元件的銷燬鉤子的觸發，因為匯流排Bus要求要先有監聽在觸發，才能成功監聽，所以我們只能在A元件的beforeDestroy或者destroyed這兩個生命週期鉤子中觸發函式emit，同理也只能在B組中的beforeCreate，created，和beforeMount這三個鉤子函式中監聽 emit，同理也只能在B組中的beforeCreate ，created，和beforeMount這三個鉤子函式中監聽emit，同理也只能在B組中的beforeCreate，created，和beforeMount這三個鉤子函式中監聽on。

頁面渲染的值如下圖所示

還是有之前重複觸發的問題，還是會隨著切換次數的增加而使監聽函式觸發的次數增加，解決這個問題就簡單了。在我們用匯流排傳值的時候要記得關閉監聽，在B元件中的destroyed鉤子中增加EventBus.$off方法即可，至此就沒問題了。

以上這篇解決Vue使用bus匯流排時,第一次路由跳轉時資料沒成功傳遞問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。