Nuxt路由如何配置带连字符路径及动态路由的子路由？

1. 创建包含连字符的路由 #

无需额外特殊配置，Nuxt 文件路由规则会直接映射目录/文件名到路由路径，直接在 pages 目录下创建对应带连字符的文件即可：
要实现 user/my-profile 路径，直接创建 pages/user/my-profile.vue 即可，也可采用目录形式 pages/user/my-profile/index.vue，两种写法都能正常生成带连字符的路由路径。

2. 动态路由创建子路由的问题 #

该匹配异常的核心原因是嵌套路由的父页面缺少子路由占位组件，或目录结构不符合规则，可按两种场景处理：

场景1：需要复用 _id.vue 作为子路由的父布局 #

现有目录结构不需要调整，仅需在 pages/detail/_id.vue 的模板代码中添加子路由占位组件：

• Nuxt 2 环境添加 <nuxt-child />
• Nuxt 3 环境添加 <NuxtPage />
  添加后访问 detail/:id/something 时，something.vue 的内容会渲染在父页面的占位组件位置。

注：Nuxt 3 环境动态路由命名规则为中括号包裹参数，如 [id].vue 或 [id]/index.vue，规则逻辑与上述一致。

场景2：detail/:id/something 为独立页面，不需要复用 _id.vue 布局 #

调整目录结构如下即可：

pages/
└── detail/
    └── _id/
        ├── index.vue  # 对应原 detail/:id 路由
        └── something.vue  # 对应 detail/:id/something 路由

该结构下两个路由为平级独立页面，无需父页面添加占位组件即可正常匹配。

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