Nuxt.js如何获取路由参数并在mounted中赋值给data内变量

结论 #

完全可以在mounted钩子中获取路由参数并赋值给data中定义的变量，只需要注意一个核心区分：你当前URL中?后的参数属于查询参数（query），不是动态路由占位的params参数，取值时要调用this.$route.query而不是this.$route.params。

具体实现代码 #

场景1：当前/activate页组件内直接赋值 #

mounted () {
  // 取值后直接赋值给data变量，加空值兜底避免参数不存在时报错
  this.serial = this.$route.query.serial || ''
  // email参数如果来自其他路由参数同理处理
  // 保留你原有的路由跳转逻辑，注意参数来源修正为query
  this.$router.push({
    path: '/activatewithphone',
    query: { 
      serial: this.$route.query.serial, 
      machine: this.$route.query.machine 
    }
  })
}

场景2：跳转到/activatewithphone页后在对应组件内赋值 #

直接在目标页的mounted钩子中取跳转携带的query参数即可：

// /activatewithphone对应组件的代码
data: () => {
  return {
    serial: '',
    email: '',
  }
},
mounted () {
  this.serial = this.$route.query.serial || ''
}

注意事项 #

• 如果你的Nuxt项目开启了SSR模式，mounted属于客户端生命周期钩子，参数仅会在客户端渲染阶段赋值。如果需要服务端渲染阶段就拿到参数，可以改用asyncData或fetch钩子处理。
• 只有动态路由（例如路由规则定义为/activate/:serial/:machine）的占位参数才需要用this.$route.params取值，所有?拼接的查询参数统一走this.$route.query取值。

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