获取URL路由参数时$route.query.token显示undefined的问题

这个问题的核心是你混淆了Vue路由中**路由参数（params）和查询参数（query）**的使用场景，我来帮你拆解清楚：

1. 两者的本质区别 #

• $route.params：对应路由路径中定义的占位符参数，比如你的路由规则如果是类似这样的：

  // 路由配置示例
  {
    path: '/your-page/:token', // 这里的:token就是params参数
    component: YourComponent
  }
  

  此时访问的URL格式是 http://your-domain/your-page/CfDJ8JrtUPxIgVlCopul3de0MqT...，token的值就会被存在$route.params.token里——这也是你控制台能拿到有效token的原因。

• $route.query：对应URL中?后面的查询字符串参数，比如URL格式是 http://your-domain/your-page?token=CfDJ8JrtUPxIgVlCopul3de0MqT...，此时token的值才会出现在$route.query.token中。你的URL里没有?token=xxx这样的结构，所以$route.query.token自然就是undefined。

2. 你的代码问题点 #

在getTokenParam方法里，你先打印了$route.query.token，但实际你的token是通过路由params传递的，所以这行打印必然输出undefined；而你后续获取的this.$route.params.token是正确的，所以控制台会先后输出Token undefined和带有有效token的那一行（具体顺序取决于钩子和方法的执行时机，但结果就是这两个输出）。

3. 修正建议 #

如果你的业务就是用路由params传递token，那直接去掉console.log("Token " + this.$route.query.token);这行多余的代码即可；如果想改用query参数传递，需要：

• 修改路由配置，去掉路径中的:token占位符
• 调整URL为http://your-domain/your-page?token=xxx的格式
• 代码中改为从$route.query.token获取值

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