在Vue.js应用中，我们有时会使用自定义事件总线（bus）来实现非父子组件间的通信，特别是在不涉及路由的场景下。然而，当在路由跳转过程中使用bus进行数据传递时，可能会遇到首次跳转时数据未能成功传递的问题。这个问题的核心在于对Vue组件生命周期的理解。
Vue的生命周期是指一个组件从创建、初始化、挂载、更新到销毁的过程。在使用bus时，我们需要确保`$on`监听事件在`$emit`触发事件之前就已经注册。如果在页面1中使用`$emit`发送数据，而页面2的`$on`监听事件还未创建，那么数据将无法被正确捕获。
来看页面1的部分代码。在`beforeDestroy`或`destroyed`钩子中，我们执行`$emit`来发送数据：
```javascript
// 页面1
beforeDestroy () {
bus.$emit('dataFromBus1', this.dataFromBus1);
}
```
在页面2，我们需要在适当的生命周期钩子中注册`$on`监听事件，并在`mounted`钩子中获取并保存数据：
```javascript
// 页面2
beforeCreate () {
bus.$on('dataFromBus1', function(url) {
bus.dataFromBus1 = url;
});
}
mounted () {
this.dataFromBus1 = bus.dataFromBus1;
}
```
这样做的原因是，当从页面1跳转到页面2时，页面2的`beforeCreate`、`created`和`beforeMount`先于页面1的`beforeDestroy`或`destroyed`执行，从而确保了在数据发送之前监听事件已经设置好。然后在`mounted`阶段，我们可以安全地将接收到的数据赋值给页面2的局部变量。
需要注意的是，虽然在`beforeCreate`、`created`或`beforeMount`中注册监听事件通常可以确保其在`$emit`之前执行，但有时可能还需要根据具体应用的需求和组件的复杂性来调整这些钩子的使用。例如，如果组件有异步操作，可能需要在`async created`或`beforeRouteEnter`等钩子中进行监听。
另外，可能出现的一个常见问题是，虽然在控制台可以看到传递的数据，但数据未能渲染到页面上。这可能是由于Vue的响应式系统未及时更新视图。在这种情况下，确保数据赋值操作发生在Vue可以检测到变化的地方，比如在`Vue.set`、`this.$set`或者上述的`mounted`钩子中。
解决Vue中使用bus总线时第一次路由跳转数据未成功传递的关键在于理解Vue的生命周期，并合理安排`$emit`和`$on`的执行时机。正确地使用生命周期钩子可以避免这个常见的陷阱，确保数据在组件间顺畅传递。
