解决Vue使用$bus总线时,路由跳转时数据没成功传递问题

$bus总线是vue中路由跳转传递数据的常用方法，适用于传递数据不多的情况，但是在使用的过程中发现，bus总线在第一次路由跳转的时候总是不能够成功传递需要传递的数据。检查bus的配置以及调用方法，均没有出错，错就错在没有理解Vue的生命周期

bus的$on的监听应该位于$emit之前，如果在emit之前没有创建监听事件，那么肯定是得不到需要的数据。

 //login组件

 beforeCreate () {
  console.log('beforeCreate 创建前状态            login')
 },
 created () {
  console.log( 'created 创建完毕状态            login')
 },
 beforeMount () {
  console.log('beforeMount 挂载前状态            login')
 },
 mounted () {
  console.log( 'mounted 挂载状态            login')
 },
 beforeUpdate () {
  console.log('beforeUpdate 更新前状态            login')
 },
 updated () {
  console.log('updated 更新状态            login')
 },
 beforeDestroy () {
  console.log('beforeDestroy 销毁前状态            login')
 },
 destroyed () {
  console.log('destroyed 销毁状态            login')
 }

当从login跳转到home的时候，控制台的打印情况如下：

从上图便可以发现，$bus使用无法传递问题出现的可能原因：

在login组件通过$emit方法传递数据所在的生命周期太早，然后跳转路由的时候，其实home组件的$on监听还没有建立，因此无法得到数据！

基于上述原因，提出的解决办法如下：

在login组件的beforeDestroy或者destroyed钩子函数中$emit数据，在home组件的beforeCreate、created或者beforeMount钩子函数中建立$on监听事件。例如此时在home组件的created钩子函数中$on得到的数据赋值给home组件的变量。

//login组件

 beforeDestroy () {

  this.$bus.$emit('data',123);

 },

 //home组件

created(){

this.$bus.$on('data',(data)=>{this.xxx=data})

}

可以发现，跳转的时候home组件就能够得到传递的数据！！！

重复触发问题

还是有之前重复触发的问题，还是会随着路由之间切换次数的增加而使监听函数触发的次数增加，123的打印次数越来越多

  //login组件

  beforeDestroy() {
         this.$bus.$emit('data',123)
  },
  destroyed() {
    console.log('login被销毁');
  },


//home组件

created(){
this.$bus.$on('data',(data)=>{
  console.log(data)
})

}

 

解决这个问题就简单了。在我们用总线传值的时候要记得关闭监听，在建立$on的组件中的destroyed钩子中增加EventBus.$off方法即可，至此就没问题了。

在home组件中加上

destroyed(){
  this.$bus.$off('data')
}