Vue.js获取浏览器URL中产品ID详情及将URL路径替换为产品标题的技术咨询

1. 获取浏览器URL中的product.id详情 #

其实你已经在代码里实现这个功能啦！Vue Router会把URL里的动态参数（就是你路由配置里的:id）存到this.$route.params对象里，所以在组件中直接通过this.$route.params.id就能拿到当前URL里的产品ID。

看你当前的mounted钩子，第一个axios请求已经在使用${this.$route.params.id}去请求对应产品的详情了，这部分是完全正确的。不过我注意到你第二个axios请求是获取所有产品，之后又把this.product覆盖了——这会导致你刚拿到的单个产品数据被全部产品列表覆盖，应该是个小bug，建议把第二个请求的赋值改成其他变量（比如this.productList），或者如果不需要获取全量产品的话直接删掉~

另外，如果你想让代码更清晰、符合Vue组件传参规范，可以用props来接收路由参数：
首先修改路由配置：

{
  path: "/products/:id",
  name: "Product",
  component: Product,
  props: true // 开启路由参数转props
}

然后在组件里声明props并使用：

export default {
  props: ['id'], // 接收路由传递的id参数
  data() {
    return {
      product: []
    };
  },
  mounted() {
    // 这里直接用this.id即可，不用再写this.$route.params.id
    axios.get(`http://localhost:5000/api/products/${this.id}`)
      .then(response => {
        this.product = response.data.product;
      })
      .catch(error => {
        console.error(error); // 建议这里打印错误，方便调试问题
      });
  }
};

2. 修改URL为产品标题的短横线格式（Slug化） #

要把URL从/products/[ID]改成/products/galaxy-note这种友好格式，需要分3步来做：

步骤1：把产品标题转换成Slug格式 #

首先需要写一个小工具函数，把产品标题转成小写、短横线分隔的格式（也就是Slug），比如把"Galaxy Note Pro"转成"galaxy-note-pro"：

methods: {
  generateSlug(title) {
    return title.toLowerCase()
      .replace(/\s+/g, '-') // 把所有空格替换成短横线
      .replace(/[^\w-]+/g, ''); // 移除标题里的特殊字符（比如标点、 emoji等）
  }
}

然后修改跳转用的router-link，用生成的slug代替ID：

<router-link :to="`/products/${generateSlug(product.title)}`">
  <img :src="product.photo" alt="Placeholder" >
</router-link>

步骤2：调整路由与后端接口支持Slug查询 #

先把路由配置里的参数名改成更语义化的slug：

{
  path: "/products/:slug",
  name: "Product",
  component: Product,
  props: true
}

接下来需要后端配合修改接口：要么新增一个/api/products/slug/:slug接口，通过slug查询产品；要么修改原有的/api/products/:id接口，让它既能识别ID也能识别slug来返回对应产品。

如果暂时没法修改后端，也可以前端先获取全量产品，再通过slug匹配到对应的ID后请求详情，但这种做法性能差（产品多的时候加载慢），还容易出问题，所以优先推荐修改后端支持slug查询。

步骤3：组件中通过Slug请求产品详情 #

修改组件里的axios请求，用路由参数里的slug去请求：

// 假设后端新增了slug查询接口
axios.get(`http://localhost:5000/api/products/slug/${this.slug}`)
  .then(response => {
    this.product = response.data.product;
  })
  .catch(error => {
    console.error(error);
  });

额外提示：保证Slug的唯一性 #

要注意不同产品的标题可能重复，所以最好在后端存储产品时，给每个产品生成唯一的slug字段（比如重复标题后加-1、-2后缀），避免多个产品对应同一个slug导致URL冲突的问题。

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