路由跳转后触发事件是否安全？能否保证页面先加载数据再执行事件？

这个做法其实没法保证你想要的执行顺序，核心问题在于路由跳转的异步性和事件总线的时机不匹配，具体原因和解决方案如下：

问题分析 #

当你执行这段代码时：

this.$router.push('/my-profile/messages'); 
this.$nextTick(() => this.$eventBus.$emit('passUserToMessages', user) );

1. $router.push是异步操作：Vue Router不会立刻完成页面切换，它需要经历卸载当前组件、加载目标组件模板、完成组件挂载等一系列过程，这个过程需要时间。
2. $nextTick只作用于当前页面：它仅等待当前组件的DOM更新循环结束，不会等待目标页面的组件创建或挂载。这就导致当$eventBus.$emit触发时，消息页面的组件可能还没被实例化，更别说注册$on监听事件了——事件会直接“丢失”，因为此时没有监听者接收它。

你的消息页面里的$on监听是在组件的某个生命周期钩子（比如created或mounted）中注册的，而这个钩子的执行时机是在路由跳转完成、组件挂载之后，所以必然晚于当前页面的$nextTick执行时机，自然无法接收到之前发送的事件。

可行的解决方案 #

推荐以下几种更可靠的方式来实现需求：

1. 使用路由参数传递数据（适合简单/可序列化的数据） #

如果user对象可以被序列化（比如只需要传递ID或部分基础字段），可以直接通过路由的query或params传递：

// 跳转页面时
this.$router.push({
  path: '/my-profile/messages',
  query: { userId: user.id } // 用params的话需要路由配置对应参数，根据你的路由规则选择
});

// 消息页面获取数据并处理
created() {
  const userId = this.$route.query.userId;
  // 如果需要完整用户信息，可以根据ID从接口或状态管理中获取
  // 如果是直接传递简单对象，也可以用JSON.stringify/parse（注意url长度限制）
  const user = JSON.parse(this.$route.query.user || '{}');
  if (user.id) {
    this.usersToChatWith.push(user);
  }
}

2. 使用状态管理（Vuex/Pinia，适合复杂数据） #

如果user对象比较复杂，或者需要在多个组件间共享，用状态管理是更规范的方式：

// 跳转前先将数据存入状态管理
this.$store.commit('messages/setUserToChat', user); // 假设用命名空间模块
this.$router.push('/my-profile/messages');

// 消息页面在生命周期钩子中读取数据
created() {
  const user = this.$store.state.messages.userToChat;
  if (user) {
    this.usersToChatWith.push(user);
    // 用完后建议清空，避免下次进入页面时重复添加
    this.$store.commit('messages/clearUserToChat');
  }
}

3. 调整事件总线的使用逻辑（不推荐，但适合临时场景） #

如果一定要用事件总线，可以给事件总线加一个“待处理队列”，让目标页面挂载后主动检查队列：

// 先给事件总线扩展一个待处理对象（建议在全局初始化事件总线时设置）
const eventBus = new Vue();
eventBus.pendingEvents = {};

// 跳转页面时，先把数据存入队列
this.$router.push('/my-profile/messages');
eventBus.pendingEvents.passUserToMessages = user;

// 消息页面处理逻辑
created() {
  // 先检查待处理队列中是否有数据
  if (this.$eventBus.pendingEvents.passUserToMessages) {
    this.usersToChatWith.push(this.$eventBus.pendingEvents.passUserToMessages);
    delete this.$eventBus.pendingEvents.passUserToMessages;
  }
  // 再注册常规监听，处理后续可能的事件
  this.$eventBus.$on('passUserToMessages', (user) => {
    this.usersToChatWith.push(user);
  });
}

总结 #

你的原始方案无法保证页面加载后再执行事件填充，因为事件发送时机早于监听注册时机。推荐优先使用路由参数或状态管理方案，这两种方式更符合Vue的最佳实践，也更稳定可靠。

内容的提问来源于stack exchange，提问作者Dusko Trifkovic