Nuxt3迁移：Vue3 Router如何拆分id与slug参数并设slug为可选？

方案1：使用Nuxt3文件系统路由（推荐） #

Nuxt3默认基于文件结构生成路由，若要完全匹配你原有的无分隔符路由格式（如/event/1或/event/1myslug），可在nuxt.config.ts中扩展路由规则：

export default defineNuxtConfig({
  router: {
    extendRoutes(routes, resolve) {
      routes.push({
        name: 'event-id',
        path: '/event/:id(\\d+):slug([\\w-]*)?', // 给slug参数添加?标记为可选
        component: resolve(__dirname, 'pages/event/[id].vue')
      })
    }
  }
})

方案2：修改自定义Vue Router配置 #

Nuxt3采用Vue Router 4，可选参数必须显式添加?后缀。将你的路由配置调整为：

{
    name: 'event-id',
    path: '/event/:id(\\d+):slug([\\w-]*)?', // 关键：在slug参数后加?
    component: () => import('../pages/event/[id]'),
},

两种方案均可实现：访问domain.com/event/1时，id解析为1，slug为undefined；访问带slug的路径时，参数也能正常拆分。若为新项目，优先选择方案1，更贴合Nuxt3的设计理念。

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