Nuxt 3动态路由多参数解析：如何按预期拆分URL参数

可以实现你需要的参数解析效果，下面提供两种可行方案：

方案一：使用路由参数正则约束 #

Nuxt 3支持在动态路由文件名中为参数添加正则匹配规则，以此约束参数格式，实现精准拆分。

将你的路由文件重命名为：

pages/
|---detail/
|-----[category]/
|--------[productSlug]-[id(\\d+)].vue

规则说明 #

• [id(\\d+)] 表示id参数仅匹配一个或多个数字字符，当访问/detail/test/test-product-12时：
  • 最后一段的12会被匹配为id参数
  • 前面的test-product会被完整识别为productSlug参数
  • 上层的test对应category参数

此时组件中获取的参数为：

{
  category: 'test',
  productSlug: 'test-product',
  id: '12' // 注意：id默认是字符串类型，如需数字可通过Number(id)转换
}

方案二：自定义路由规则（更灵活） #

如果需要更复杂的路由匹配逻辑，可以在nuxt.config.ts中直接自定义路由规则，手动指定参数的匹配格式：

export default defineNuxtConfig({
  router: {
    routes: (existingRoutes) => [
      // 保留原有路由，添加自定义规则
      ...existingRoutes,
      {
        path: '/detail/:category/:productSlug-:id(\\d+)',
        component: () => import('~/pages/detail/[category]/[productSlug]-[id].vue'),
      }
    ]
  }
})

这种方式可灵活控制路由的匹配优先级和参数规则，适合复杂场景。

注意事项 #

• 若存在多个相似路由，需注意自定义路由的顺序，确保精准匹配的规则优先被命中
• 参数id默认返回字符串，若需要数值类型，可在组件内自行转换

内容的提问来源于stack exchange，提问作者Almir Pehlivanović