Vue计算属性在Devtools可见，但mounted钩子中this访问返回undefined

看起来你遇到的核心问题是：组件挂载时（mounted钩子），路由参数还没被正确解析，导致你的计算属性reservationId返回undefined——哪怕用了$nextTick也没用，因为$nextTick只负责等待当前DOM更新完成，不处理路由的异步解析或切换逻辑。

结合你的上下文（认证完成后渲染Chat组件）和路由配置，我梳理了几个可能的原因和对应的解决办法：

一、先确认当前路由的状态 #

首先你可以在mounted里先打印当前路由信息，排查参数是否存在：

mounted() {
  console.log('当前路由：', this.$route);
  // 看看params里有没有reservationId
}

如果打印结果里params是空的，说明Chat组件挂载时，当前路由还不是/reservation/:reservationId——毕竟你是在App.vue的created完成认证后才渲染Chat，这时候路由可能还停留在登录页或其他页面，之后才会跳转到带参数的预订路由。

二、针对性解决办法 #

1. 监听路由变化（最通用的方案） #

既然路由参数可能在组件挂载后才更新，不如直接监听$route的变化，确保每次路由切换时都能拿到最新的参数：

watch: {
  '$route': {
    immediate: true, // 组件挂载时立即执行一次
    handler(newRoute) {
      const reservationId = newRoute.params.reservationId;
      if (reservationId) { // 确保参数存在再执行逻辑
        this.getUser();
        this.fetchGroupMessages();
        console.log(reservationId);
      }
    }
  }
},
// 可以去掉updated钩子，避免不必要的重复调用

这个方案的好处是不管路由什么时候切换，只要参数更新了，你的业务逻辑都会触发。

2. 通过Props传递参数（更清晰的组件解耦） #

如果Chat组件是Reservation组件的子组件（从路由配置看，Reservation是/reservation/:reservationId的父组件），那最好通过Props把参数传递给Chat，而不是直接依赖$route：

• 在Reservation组件中：

<Chat :reservation-id="$route.params.reservationId" />

• 在Chat组件中：

props: {
  reservationId: {
    type: String, // 根据你的参数类型调整，比如Number
    required: true
  }
},
mounted() {
  this.getUser();
  console.log(this.reservationId); // 这里肯定能拿到值
},
watch: {
  reservationId(newId) {
    this.fetchGroupMessages();
  }
}

这种方式让组件的依赖更明确，也避免了组件和路由的强绑定。

3. 调整组件渲染时机 #

如果Chat是全局渲染的组件（比如App.vue里直接显示的聊天窗口），那可以在App.vue里等路由切换到目标页面后再渲染Chat：

// App.vue的created钩子
async created() {
  // 完成认证逻辑
  await this.handleAuth();
  if (this.isLoggedIn) {
    // 如果有跳转的目标路由（比如从登录页跳转过来），先完成路由跳转
    const targetRoute = this.$route.query.redirect || '/';
    await this.$router.push(targetRoute);
    // 路由跳转完成后再渲染Chat组件
    this.showChat = true;
  }
}

这样Chat组件挂载时，路由已经完全解析，计算属性就能拿到正确的参数了。

额外优化：替换updated钩子 #

你现在用updated钩子调用fetchGroupMessages，但updated会在每次DOM更新时触发（比如组件内任何数据变化），很容易造成不必要的请求。建议改成监听reservationId的变化：

computed: {
  reservationId() {
    return this.$route.params.reservationId;
  }
},
watch: {
  reservationId(newId) {
    if (newId) {
      this.fetchGroupMessages();
    }
  }
}

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