Vue中用Axios挂载商品详情数据遇400错误的技术问询

核心问题分析 #

400错误（ERR_BAD_REQUEST）说明请求参数或URL格式不符合后端API要求，大概率是详情页没有正确获取到路由传递的商品ID，导致请求URL中ID为空或无效。

具体修复步骤 #

1. 确保路由参数正确传递到详情页 #

方案A：通过路由props传递参数（推荐）

修改router.js中的路由配置，添加props: true，让路由参数自动映射为组件的props：

//to view menu item :id
{
  path: '/ViewDetails/:id',
  name: 'viewitems',
  component: ViewItemDetails,
  props: true // 新增这行
}

这样详情页组件中定义的props:['id']就能正确拿到路由中的id参数。

方案B：直接在组件中读取路由参数

如果不想配置props，直接修改详情页的fetchProductDetail方法，用this.$route.params.id获取ID：

methods:{
  fetchProductDetail(){
    // 替换this.id为this.$route.params.id
    axios.get(`https://localhost:44345/api/MenuItemModels/${this.$route.params.id}`)
    .then(res =>{
      this.product = res.data;
    })
    .catch(error => {
      console.error("fetch product detail error!", error);
    })
  },
}

2. 验证ID的有效性 #

• 在列表页添加日志，确认product.itemID是有效数据：

  <router-link :to="{name: 'viewitems', params: { id: product.itemID }}">
    <h5 class="card-title mb-3">{{ product.itemName  }} </h5>
    <!-- 新增日志 -->
    {{ console.log('当前商品ID:', product.itemID) }}
  </router-link>
  

• 在详情页的created钩子中打印ID，确认获取正确：

  created(){
    console.log('获取到的商品ID:', this.id || this.$route.params.id);
    this.fetchProductDetail();
  },
  

3. 检查后端API兼容性 #

• 查看浏览器Network面板，确认请求的URL是否正确（比如是否是https://localhost:44345/api/MenuItemModels/123，其中123是有效ID）。
• 确认后端API接受的ID类型（数字/字符串）与你传递的一致，如果后端要求数字，确保传递的不是字符串格式的ID。
• 验证后端API单独访问是否正常（比如直接在浏览器地址栏输入https://localhost:44345/api/MenuItemModels/你的测试ID，看是否返回正确数据）。

4. 修复注释代码中的错误（可选） #

你之前注释的代码中，路由参数名写错了，应该是this.$route.params.id而不是this.$route.params.itemID：

// 修复后
product: menuItems.find(product => product.itemID == this.$route.params.id ),

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