记一笔vue中的中央事件总线的问题，以及解决方案

Posted 2020-11-18 evaling

代码结构：首先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，所以就会有问题。