Vue使用bus总线时,第一次路由跳转时数据没成功传递的原因以及解决办法

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

我们知道bus的$on的监听应该位于$emit之前,如果在emit之前没有创建监听事件,那么肯定是得不到需要的数据。因此,我通过两个页面来了解路由跳转时两个页面的生命周期,下面给出其中一个页面的部分代码:

 
  1. //页面1

  2. beforeCreate () {

  3. console.group('%c%s', 'color:red', 'beforeCreate 创建前状态===============组件1》')

  4. },

  5. created () {

  6. console.group('%c%s', 'color:red', 'created 创建完毕状态===============组件1》')

  7. },

  8. beforeMount () {

  9. console.group('%c%s', 'color:red', 'beforeMount 挂载前状态===============组件1》')

  10. },

  11. mounted () {

  12. console.group('%c%s', 'color:red', 'mounted 挂载状态===============组件1》')

  13. },

  14. beforeUpdate () {

  15. console.group('%c%s', 'color:red', 'beforeUpdate 更新前状态===============组件1》')

  16. },

  17. updated () {

  18. console.group('%c%s', 'color:red', 'updated 更新状态===============组件1》')

  19. },

  20. beforeDestroy () {

  21. console.group('%c%s', 'color:red', 'beforeDestroy 破前状态===============组件1》')

  22. },

  23. destroyed () {

  24. console.group('%c%s', 'color:red', 'destroyed 破坏状态===============组件1》')

  25. }

当从页面1跳转到页面2的时候,控制台的打印情况如下:

Vue使用bus总线时,第一次路由跳转时数据没成功传递的原因以及解决办法

从上图便可以发现,bus第一次使用无法传递的原因:

在页面1通过$emit方法传递数据然后跳转路由的时候,其实页面2的$on监听还没有建立,因此无法得到数据!

基于上述原因,提出的解决办法如下:

在页面1的beforeDestroy或者destroyed钩子函数中emit数据,在页面2的beforeCreate、created或者beforeMount钩子函数中建立$on监听事件,然后在页面2的mounted钩子函数中$on得到的数据赋值给页面2的变量中。

 
  1. //页面1

  2. beforeDestroy () {

  3. bus.$emit('dataFromBus1',this.dataFromBus1);

  4. },

 
  1. //页面2

  2. beforeCreate () {

  3. bus.$on('dataFromBus1',function(url){

  4. bus.dataFromBus1 = url

  5. });

  6. },

  7. mounted () {

  8. this.dataFromBus1 = bus.dataFromBus1;

  9. },

Vue使用bus总线时,第一次路由跳转时数据没成功传递的原因以及解决办法

Vue使用bus总线时,第一次路由跳转时数据没成功传递的原因以及解决办法

可以发现,第一次跳转的时候页面2就能够得到传递的数据!!!

这个坑应该是使用bus必须会 踩到的,希望下次使用的时候能够留个心眼!!!

上一篇:在FL Studio中有序地处理人声的混音轨道


下一篇:vue实现分类目录效果