Nuxt 两层深度嵌套路由不生效及自定义路由层级需求咨询

你的需求完全可以实现，之前配置不符合预期的核心原因是：通过嵌套文件夹定义的路由会自动把上层文件作为父路由，你把edit页面放在_month文件夹下，_month.vue就自动成为了edit页面的父级，渲染时必然会同时加载月份页面的内容。

你只需要调整pages目录结构，用Nuxt支持的点分隔路由命名规则即可实现需求，无需嵌套文件夹：

pages/
├── _year/
│   ├── _month.vue          # 匹配 /:year/:month 路由，渲染年份+月份内容
│   ├── _month.edit.vue     # 匹配 /:year/:month/edit 路由，父级仅为_year.vue
│   └── index.vue           # 匹配 /:year 路由，渲染年份首页内容
└── _year.vue               # 年份公共父级，保留内部的 `<nuxt-child>` 标签即可

配置调整要点 #

• 删除你之前创建的_month嵌套文件夹
• 删除_month.vue中额外添加的<nuxt-child>标签，不需要将月份页面作为嵌套父级
• 新增的_month.edit.vue直接放在_year目录下，和_month.vue同级即可

调整后路由效果完全符合你的预期：

• 访问/2021：仅渲染年份父级内容 + 年份首页内容
• 访问/2021/jun：渲染年份父级内容 + 月份页面内容
• 访问/2021/jun/edit：渲染年份父级内容 + edit页面内容，不会加载月份页面的内容

如果你使用的是Nuxt3，只需要把动态参数的命名格式从_xxx替换为[xxx]即可，路由逻辑完全一致。

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