代碼結構：首先HeaderNav組件是被單獨拎出來的，router-view中就對應了內容組件，由於有時候i有的界面的header內容是不一樣的，因此要用到兄弟組件的相互通信，這個時候我首先選擇了bus[中央事件總線]

  <div class="" v-if="!showScan">
      <HeaderNav/>
      <router-view/>
  </div>

問題描述：就是在頁面上用按鈕點擊切換路由的時候了，header是可以正常切換的，但是如果是地址欄上直接輸入路由進入的時候了，就驢頭不對馬口了。

HeaderNav.vue中邏輯代碼

methods: {
.....
watchChangeHeader () {
      this.bus.$on(‘changeHeader‘, info => {
        debugger
        if (info) {
          setInStorage(‘headerLag‘,info.headerLag)
          this.headerLag = info.headerLag
          setInStorage(‘title‘,info.title)
          this.title = info.title
        } else {
           this.headerLag =‘‘
           setInStorage(‘headerLag‘,‘‘)
        }
      })
    }
.....
}

  mounted () {
    this.watchChangeHeader()
  },

　內容組件的邏輯代碼：　

  created () {
    console.log(‘framework created‘)
    this.bus.$emit(‘changeHeader‘,‘‘)
  }

　以上只是代碼片段....

首先要進行科普下：

1）$emit時，必須已經$on，否則將無法監聽到事件，也就是說對組件是有一定的同時存在的要求的　

　　這個可能就是問題的原因，問題就是在一個組件$emit()的時候，他的兄弟組件並沒有$on()，這就無法導致能夠響應，因此我就改了下代碼，將HeaderNav.vue，果然問題解決了。。。

 created() {
    this.watchChangeHeader()
  },

　　但是我還有一個疑問？？？為什麽頁面點擊按鈕切換路由是正確的，但是直接輸入路由就不行啦？？？？？

經過一翻手動驗證，發現了這一問題的原因。在頁面點擊按鈕切換路由的時候，我們重新渲染的只是<router-view />這個路由組件對應的內容，由於HederBNav這個組件一直存在不會重新的created,mounted，意思就是說在嫩內容組件$emit的時候，HeaderNav組件的$on一直存在，所以沒問題。但是如果我們直接地址欄上輸入路由地址進行頁面切換，本質上已經不是單頁面了，這會造成整個代碼會重新加載運行，這個時候在內容組件created()發出$emit()，HeaderNav還沒有被掛在完成（mounted）,也就不存在$on，所以就會有問題。

記一筆vue中的中央事件總線的問題，以及解決方案