Vue-router跳转详情页后无法获取对应记录API响应的问题

你遇到的核心问题是axios请求的URL没有正确解析路由参数，导致浏览器请求了一个不存在的字面量路径，直接返回404。下面是具体的修复步骤和细节说明：

问题根源 #

在GinsShow.vue的created钩子中，你把axios的请求地址写成了字符串'this.$route.params.slug'——浏览器会把这个字符串当作完整的URL去请求，而不是解析成路由参数对应的实际值。另外，请求也缺少了API的基础路径（比如后端接口的前缀），导致请求直接打到了前端服务的端口上。

修复后的代码 #

修改GinsShow.vue中的created部分：

<script>
import axios from 'axios'
export default {
  name: 'Gin-Show',
  data() {
    return {
      gin: [],
      errors: []
    }
  },
  created() {
    // 用模板字符串解析路由参数，同时补充API基础路径
    axios.get(`/api/gins/${this.$route.params.slug}`)
      .then(response => {
        this.gin = response.data
        console.log('获取到的详情数据:', response.data) // 用于调试确认
      })
      .catch(e => {
        this.errors.push(e)
        console.error('请求错误详情:', e) // 打印完整错误信息排查问题
      })
  }
}
</script>

关键说明 #

1. 模板字符串的使用：用反引号``包裹URL，通过${变量}的方式插入路由参数this.$route.params.slug，这样才能正确解析出当前路由的slug值。
2. API基础路径：请根据你的后端实际接口地址调整前缀，比如如果后端API运行在http://localhost:3000，那么应该写成axios.get(http://localhost:3000/gins/${this.$route.params.slug})。
3. 调试辅助：在then和catch中添加日志，可以帮你快速确认参数是否正确传递、接口是否返回预期数据。

额外检查项 #

• 确认后端已经实现了GET /gins/:slug的接口，并且可以正常返回单条记录数据；
• 如果前后端分离部署，确保后端配置了跨域允许（CORS），避免请求被浏览器拦截；
• 可以先在created钩子中打印console.log(this.$route.params)，确认slug参数是否从列表页正确传递过来。

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