Vue.js中如何将产品URL的ID替换为产品名称实现友好链接

核心实现步骤 #

• 第一步：封装URL路径段生成工具
  首先需要把产品title处理成URL兼容的格式，你给出的示例是galaxy s10转成galaxys10，直接复用下面的工具函数即可，同时兼容中文、特殊字符场景：

  // src/utils/common.js 可自行调整存放路径
  export const getProductPath = (title) => {
    if (!title) return ''
    return title
      .toLowerCase() // 统一转小写，避免大小写差异导致匹配失败
      .replace(/\s+/g, '') // 移除所有空格，需要用横杠分隔单词就把这里的''改成'-'
      .replace(/[^\w\u4e00-\u9fa5-]/g, '') // 移除特殊符号，保留英文、数字、中文、横杠
  }
  

• 第二步：修改路由配置
  把原有路由的路径参数从id替换为slug（路径标识），建议开启props传参简化组件取值逻辑：

  // src/router/index.js 对应路由规则修改为
  {
    path: "/products/:slug",
    name: "Product",
    component: Product,
    props: route => ({ pathSlug: route.params.slug })
  }
  

• 第三步：调整所有产品详情页的跳转逻辑
  所有跳转到产品详情的地方，不再传_id作为参数，改为传入处理后的title路径段：

  <!-- 模板中router-link写法 -->
  <router-link :to="`/products/${getProductPath(product.title)}`">
    {{ product.title }}
  </router-link>
  

  // 编程式导航写法
  import { getProductPath } from '@/utils/common'
  
  // 跳转逻辑示例
  router.push({
    name: 'Product',
    params: {
      slug: getProductPath(product.title)
    },
    // 如果是从列表页跳详情，可以直接把当前拿到的产品数据存在state里，详情页不用重复请求
    state: { currentProduct: product }
  })
  

• 第四步：修改详情页的数据获取逻辑
  原来详情页是拿路径里的id参数匹配_id查产品，现在分两种场景适配：

  1. 站内跳转场景：直接从history.state.currentProduct取之前传过来的产品数据即可，无额外请求开销
  2. 用户直接输入URL访问、刷新页面场景：有两种实现方式，优先选第一种：
     • 接口适配：后端产品接口支持传slug查询对应产品，详情页初始化时拿路径里的slug参数调用接口拿数据，稳定性最高
     • 前端匹配：如果接口暂时不支持，详情页初始化时拉取产品列表，遍历每个产品调用getProductPath(title)和当前路径的slug做比对，找到匹配的产品数据即可

注意事项 #

纯前端匹配slug存在重名冲突风险：如果两个产品title处理后得到的路径段完全一致，会出现匹配错误的问题。如果产品存在重名可能，建议后端为每个产品生成全局唯一的slug字段（比如title处理后拼接短id，类似galaxys10-625672），从根源避免冲突。

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