如何在Axios中传递路径参数？Vue请求API缺失ID参数问题

你的代码存在两个核心问题，导致请求URL不符合预期：

1. 参数传递方式错误 #

你想要的是路径参数（把id嵌入URL路径，比如/trackers/123），但当前代码用了Axios的params配置，这会把参数转换成查询参数（即/trackers/?id=xxx），而非替换路径里的占位符。

2. 变量声明顺序错误 #

你在调用axios.get之后才定义id变量，此时axios请求时id为undefined，即便用查询参数也无法正确传递值。

修正后的代码 #

mounted() {
    // 先从localStorage获取id变量
    let id = localStorage['id'] 
    // 用模板字符串把id拼接到URL路径中
    axios.get(`http://localhost:5000/trackers/${id}`)
    .then((resp ) => console.log(resp.data))
    .catch((err) => console.log(err.response))
}

关键说明 #

• 使用模板字符串（反引号`）拼接URL，直接将id嵌入路径，实现/trackers/{{id}}的预期格式
• 调整变量声明顺序，确保调用Axios时id已完成赋值
• 如果后续需要同时传递路径参数和查询参数，可以结合两种方式：

  axios.get(`http://localhost:5000/trackers/${id}`, {
      params: {
          otherParam: 'exampleValue'
      }
  })
  // 最终URL会是 /trackers/123?otherParam=exampleValue
  

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