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

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

我们知道bus的$on的监听应该位于$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通过$emit方法传递数据然后跳转路由的时候，其实页面2的$on监听还没有建立，因此无法得到数据！

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

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

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

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

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

补充知识：vue非父子组件传值（bus）遇到的坑

控制台可以打印出传递过来的值，但就是不会渲染到页面上那么重点来了！！！

在A销毁之前，B组件的beforeCreate ，created，和beforeMount这三个钩子函数先触发，之后才是A组件的销毁钩子的触发，因为总线Bus要求要先有监听在触发，才能成功监听，所以我们只能在A组件的beforeDestroy或者destroyed这两个生命周期钩子中触发函数emit，同理也只能在B组中的beforeCreate，created，和beforeMount这三个钩子函数中监听 emit，同理也只能在B组中的beforeCreate ，created，和beforeMount这三个钩子函数中监听emit，同理也只能在B组中的beforeCreate，created，和beforeMount这三个钩子函数中监听on。

页面渲染的值如下图所示

还是有之前重复触发的问题，还是会随着切换次数的增加而使监听函数触发的次数增加，解决这个问题就简单了。在我们用总线传值的时候要记得关闭监听，在B组件中的destroyed钩子中增加EventBus.$off方法即可，至此就没问题了。

以上这篇解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

解决vue使用bus,路由跳转时被多次触发问题

最近项目中使用eventBus进行组件之间的通信，但是发现会出现，第一次会触发接口一次，第二次会触发接口两次，第N次会触发接口N次https://blog.csdn.net/Kiruthika/article/details/121024858

vue eventBus两个页面之间传值，第一次监听不到的问题

原因是关于vue的生命周期的问题 （1）A页面向B页面传值，B页面先执行created，A页面执行beforeDestroy,destroyed,所以A页面的bus. on不会自动销毁，记得在B页面的destroyed生命周期中bus.$off销毁监听

Vue路由跳转问题怎么解决

路由设置如下：{ path:’/tab’, component:Tab, children:[{ path:’layoutList’, name:’LayoutList’, component:LayoutList },{ path:’layoutView/:layoutId’, name:’LayoutView’, component:LayoutView },{ path:’layoutDetail/:viewId’, name:’LayoutDetail’, component:LayoutDetail }] }其中/tab是根地址，有3个子地址，3个子地址层级为：LayoutList => LayoutView => LayoutDetail正常情况：假设当前路由为/tab/layoutList，需要跳转到LayoutView页面，可以通过router.push({path:’layoutView/’+item.id})

Vue组件传值及页面缓存问题

关于父组件的传值类型和props更多的定义详见官网 ： vue官网 （2）子组件向父组件传值 （3）通过 chlidren等方法调取用层级关系的组件内的数据和方法。 有很多时候根据业务需求要在同级组件或页面间传值，此处提供以下几种方法作为参考: （1）通过router-link进行跳转 （2） this.$router.push() 此方法同样是有path+query和name+params两种方式： 总结：使用query，传输的值会在url后面以参数的形式显示出来，可以刷新页面，数据不变，但会是页面路由过长；而params只要一刷新传递的参数就没了。

（4）通过Vuex进行传值 （5）发布订阅模式（也叫eventBus或事件总线） 在Vue的原型上定义一个变量eventBus，所有所有Vue的实例或组件都将共享这个eventBus，可以用eventBus来发布自定义事件，然后在组件中用eventBus订阅自定义事件。就可以实现传值。 详细讲解可看 链接 （6）Vue.observable index.vue组件中触发： Vue中如何在切换组件过程中，将状态保存到内存中，防止DOM重新渲染，通俗的讲就是实现如何在一个页面输入部分数据后到了另一个页面再返回该页面，数据还在。 需求分析：Page1中录入信息，页面跳转带Page2，然后再返回Page1，之前Page1录入的信息还存在。

现在更改需求为： 首页是A页面 A页面跳转到B，B页面不需要缓存 B页面跳转到C，C页面不需要被缓存 C页面返回到B，B页面需要缓存 B页面返回到A， A再次跳转到B （1）此时思路是在每个路由的beforeRouteLeave(to, from, next)钩子中设置to.meta.keepAlive beforeRouteLeave讲解 PageA页面： PageB页面： （2）用eventBus解决此问题 需要注意的一点是发布订阅第一次会无效，因为订阅的组件还没创建。解决方法就是首次进入pageB页面时接收pageA页面params里传递的参数。

vue-router使用过程遇到的问题

初学vue问题记录 问题
一.vue-router使用过程遇到的登录页空白问题 之前用vue-cli创建了一个vue项目，默认使用vue-router，目录结构中自带了router目录，里面有index.js但是当我又创建一个项目的时候默认没有使用vue-router时，后面我使用npm install vue-router安装了插件之后项目中没有自动创建router目录。查找资料显示说这种方式不会创建router目录，自己就把前面创建的项目的router目录及里面的文件拷贝过来使用。

我就修改了router目录的index.js。如下：main.js中引入router.js。如下：到这里就是我找到的资料要配置登录页的，加上我不使用router-link，我就没有修改App.vue。我以为都配置完成了，就直接启动项目，发现页面空白。

后来才发现App.vue中没有使用<router-view></router-view>。在App.vue加入<router-view></router-view>启动就成功显示登录页面了。总结：使用vue-router， 1.需要在router目录的index.js维护好路由 2.main.js中引入router下文件 3.App.vue中使用router-view最后还发现了一个问题，用 http://localhost:8080/访问title上的favicon没有显示；用http://172.17.112.40:8080/访问title上的favicon就能显示通过测试发现，好像是浏览器缓存问题，清除浏览器缓存又可以正常显示了。

问题
二.使用vue-router过程中，子路由不显示问题 问题描述，我的项目是一个登录页面，项目默认显示登录页面；登录成功后显示登录成功后的默认页面，我的默认页面是由header公共导航和内容组件组成，这个时候出现了问题，header部分组件显示正常，但是内容组件不显示。经过分析查阅资料是因为父路由组件没有使用router-view导致的。我的header组件是由两个组件组成的，就在header组件内加上router-view登录成功后的默认页面就显示正常了。

HeadLayout.vue中增加router-view，解决子路由不显示问题总结：要使用路由一定要在使用router-view，要在父级组件中使用。 问题
三.子路由跳转问题 问题描述：原本MainMenu.vue中使用的是a链接，我添加的click方法进行路由切换，但是总是失败，切换后一闪第二个页面的内容，然后又显示第一个页面内容。写法如下：第二个子路由页面内容闪一下最终显示第一个子路由页面内容这个a链接click的问题原因出现在href上，我只是清空了里面的内容，需要删除该属性，或者将值改为href=”javascript:;”， 解析参照：https://www.cnblogs.com/fairy62/p/9486979.html 自己换成router-link实现路由切换，可以正常切换。

另外要在router-link上使用click方法切换路由，而不使用to属性，需要使用native修饰符。@clike.native但是还有一个问题就是我加了一个样式，给router-link，想让激活的link带背景色。我这种写法两个都有这个样式 .router-link-active { background: #848484; } 效果如下： 于是我又弃用click了，直接使用to属性才没有问题。

vue 组件通信方式，六种方法

“阿弥陀佛，善哉善哉。” “魔镜啊！魔镜，谁是这世界上最美丽的女人？” “愿上帝保佑你，阿门！” 等等，这些语句是不是特别经典？特别有画面感？眼前立马浮现出家人、后母和牧师？ 通过言语，可以判断一个人的职业、身份、地位。

（1）props / $emit 适用 父子组件通信 父组件注入，子组件接收。 这种方法是 Vue 组件的基础，相信大部分同学耳闻能详，所以此处就不举例展开介绍。 注意：props是单向数据流，既只能从父级传到子级，如果想要达到双向，子级能够修改父级，则需要给props加sync修饰符。(文章后部分有详细介绍) （2）ref 与 $parent / $children 适用 父子组件通信 ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例 $parent / $children：访问父 / 子实例 （3）$attrs / $listeners 适用于 隔代组件通信 $attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 ( class 和 style 除外 )。

当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 ( class 和 style 除外 )，并且可以通过 v-bind=”$attrs” 传入内部组件。通常配合 inheritAttrs 选项一起使用。 $listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。

它可以通过 v-on=”$listeners” 传入内部组件 （4）provide / inject 适用于 隔代组件通信 祖先组件中通过 provider 来提供变量，然后在子孙组件中通过 inject 来注入变量。provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。（5）EventBus （$emit / $on） 适用于 父子、隔代、兄弟组件通信 这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件，从而实现任何组件间的通信，包括父子、隔代、兄弟组件。

（6）Vuex 适用于 父子、隔代、兄弟组件通信 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。 改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。

vuex的详细使用方法： vuex管理状态仓库使用详解 Vue 组件间通信是面试常考的知识点之一，这题有点类似于开放题，你知道的回答出越多方法越加分，表明你对 Vue 掌握的越熟练。 举例props使用 a.vue 引用了一个detail组件 详解eventBus通信方法 第一步：首先需要创建事件总线并将其导出，以便其它模块可以使用或者监听它。 两个初始化事件中心的方法： 第二步：创建了 EventBus ，接下来你需要做到的就是在你的组件中加载它，并且调用同一个方法，就如你在父子组件中互相传递消息一样。 假设你有两个Vue页面需要通信： A 和 B ，A页面 在按钮上面绑定了点击事件，发送一则消息，想通知 B页面。

接下来，我们需要在 B页面 中接收这则消息。同理我们也可以在 B页面 向 A页面 发送消息。这里主要用到的两个方法： 如果使用不善，EventBus会是一种灾难，到底是什么样的“灾难”了？大家都知道vue是单页应用，如果你在某一个页面刷新了之后，与之相关的EventBus会被移除，这样就导致业务走不下去。还要就是如果业务有反复操作的页面，EventBus在监听的时候就会触发很多次，也是一个非常大的隐患。

这时候我们就需要好好处理EventBus在项目中的关系。通常会用到，在vue页面销毁时，同时移除EventBus事件监听。 如果想移除事件的监听，可以像下面这样操作： $on事件是不会自动清楚销毁的，需要我们手动来销毁，否则在b组件每次加载一次就会创建一个监听，会重复监听到数据。

可以使用EventBus.$off(‘aMsg’)来移除应用内所有对此某个事件的监听。 或者直接调用EventBus.$off()来移除所有事件频道，不需要添加任何参数 。 总结： 所以，如果想要用bus 来进行页面组件之间的数据传递，需要注意两点，组件A$emit事件应在beforeDestory生命周期内。

其次，组件B内的$on记得要销毁。