Nuxt3嵌套路由问题：新增new.vue页面无法正常访问

核心排查与修复步骤 #

1. 确保父路由包含<NuxtPage />组件 #

[id].vue作为父路由，必须放置<NuxtPage />容器来渲染子路由内容，否则edit和new页面都无法正常显示：

<!-- /pages/backoffice/creators/[id].vue -->
<template>
  <div class="creator-show-layout">
    <!-- 父路由的布局内容 -->
    <p>创作者ID：{{ $route.params.id }}</p>
    <!-- 子路由渲染入口 -->
    <NuxtPage />
  </div>
</template>

2. 验证文件路径与拼写 #

确认new.vue的路径完全正确：
/pages/backoffice/creators/[id]/new.vue
检查文件名是否存在拼写或大小写错误（如New.vue、neww.vue），Nuxt对文件名大小写敏感（取决于操作系统）。

3. 重启Nuxt开发服务器 #

开发模式下偶尔会出现路由缓存未更新的情况，停止当前服务后重新执行npm run dev，确保路由规则被重新生成。

4. 检查生成的路由列表 #

在开发模式下，通过以下方式确认目标路由是否存在：

• 访问/__nuxt__/routes.json（部分Nuxt版本路径为/__nuxt__/server/routes），查看是否包含"path": "/backoffice/creators/:id/new"的条目；
• 在浏览器控制台执行useRouter().getRoutes().filter(r => r.path.includes('new'))，打印路由信息进行确认。

5. 排查自定义路由冲突 #

如果在nuxt.config.ts中配置了app.routes自定义路由，检查是否覆盖了默认的文件系统路由规则，移除与backoffice/creators/:id/new冲突的自定义配置。

6. 检查路由守卫限制 #

如果[id].vue或全局路由守卫中存在拦截逻辑，确认是否误阻止了new路由的访问。例如：

// 错误示例：仅允许edit路由
const route = useRoute()
if (!route.path.endsWith('/edit')) {
  navigateTo('/')
}

修改为允许new路由：

const allowedSubPaths = ['/edit', '/new']
if (!allowedSubPaths.some(path => route.path.endsWith(path))) {
  navigateTo('/')
}

额外说明 #

如果你的需求是新增创作者页面（无需携带id参数），更合理的路径是backoffice/creators/new，此时应将new.vue放在/pages/backoffice/creators/new.vue，而非[id]子目录下，避免路由参数冗余。

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