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

最新推荐文章于 2023-03-20 20:37:53 发布

莫元涵

最新推荐文章于 2023-03-20 20:37:53 发布

阅读量941

点赞数 1

分类专栏： vue 文章标签： vue.js

原文链接：https://blog.csdn.net/mianyao1004/article/details/92382461

版权

vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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

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

   //页面1
    beforeCreate () {
        console.group('%c%s', 'color:red', 'beforeCreate 创建前状态===============组件1》')
    },
    created () {
        console.group('%c%s', 'color:red', 'created 创建完毕状态===============组件1》')
    },
    beforeMount () {
        console.group('%c%s', 'color:red', 'beforeMount 挂载前状态===============组件1》')
    },
    mounted () {
        console.group('%c%s', 'color:red', 'mounted 挂载状态===============组件1》')
    },
    beforeUpdate () {
        console.group('%c%s', 'color:red', 'beforeUpdate 更新前状态===============组件1》')
    },
    updated () {
        console.group('%c%s', 'color:red', 'updated 更新状态===============组件1》')
    },
    beforeDestroy () {
        console.group('%c%s', 'color:red', 'beforeDestroy 破前状态===============组件1》')
    },
    destroyed () {
        console.group('%c%s', 'color:red', 'destroyed 破坏状态===============组件1》')
    }

当从页面1跳转到页面2的时候，控制台的打印情况如下：
在这里插入图片描述

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

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

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

在页面1的beforeDestroy或者destroyed钩子函数中emit数据，在页面2的beforeCreate、created或者beforeMount钩子函数中建立 $o n 监听事件，然后在页面 2 的 m o u n t e d 钩子函数中$ on得到的数据赋值给页面2的变量中。

//页面1
  beforeDestroy () {
        bus.$emit('dataFromBus1',this.dataFromBus1);
  },

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