Vue.js中如何通过ID或Title获取对应产品列表问题排查

核心问题 #

出现 GET http://localhost:5000/api/products/undefined 500 错误的直接原因是：

• 路由配置为 :title，但前端请求时错误使用了 this.$route.params.id，此时路由参数中只有 title，id 不存在导致拼接出 undefined 的URL。
• 两个axios请求会互相覆盖 this.product 的值，逻辑冲突。
• 后端原接口仅支持按id查询，未提供按title查询的对应接口。

分步解决 #

1. 修正前端请求的路由参数

将请求中的 this.$route.params.id 改为 this.$route.params.title，匹配当前路由的参数名。

2. 调整后端接口（或前端请求方式）

如果后端未提供按title查询的接口，需要新增接口，比如：

• 路径匹配式：GET /api/products/by-title/:title（推荐）
• Query参数式：GET /api/products?title=xxx

对应前端请求代码修改：

// 方式1：后端新增路径式接口
axios.get(`http://localhost:5000/api/products/by-title/${this.$route.params.title}`)
  .then(response => {
    this.product = response.data.product;
  })
  .catch(error => {
    console.error('获取产品失败:', error); // 必须打印错误，方便调试
  });

// 方式2：后端支持query参数查询
axios.get('http://localhost:5000/api/products', {
  params: { title: this.$route.params.title }
})
.then(response => {
  // 注意：如果后端返回的是列表，需要取第一个匹配项
  this.product = response.data.products?.[0] || {};
})
.catch(error => {
  console.error('获取产品失败:', error);
});

3. 修正数据初始化与请求逻辑

• 单个产品是对象而非数组，将data中的product初始化为{}，避免渲染时的类型错误。
• 移除多余的第二个axios请求（如果不需要同时获取全量列表），或把列表数据存到单独变量中，避免覆盖单个产品数据：

import axios from "axios";
export default {
  data() {
    return {
      product: {}, // 单个产品是对象，不是数组
      productsList: [] // 如需全量列表，单独存储
    };
  },
  mounted() {
    // 获取单个产品（按title）
    axios.get(`http://localhost:5000/api/products/by-title/${this.$route.params.title}`)
      .then(response => {
        this.product = response.data.product;
      })
      .catch(error => {
        console.error('获取产品失败:', error);
      });

    // 如需获取全量列表，单独存到productsList
    axios.get('http://localhost:5000/api/products')
      .then(response => {
        this.productsList = response.data.products; // 注意后端返回的列表字段名，可能是products而非product
      })
      .catch(error => {
        console.error('获取产品列表失败:', error);
      });
  },
};

4. 优化路由跳转的安全性

给router-link添加判断，确保product.title存在时再跳转，避免生成无效URL：

<router-link v-if="product.title" :to="`/products/${product.title}`">
  <img :src="product.photo" alt="Placeholder image">
</router-link>

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