Nuxt动态路由失效：嵌套动态路由访问渲染错误如何解决？

我来帮你搞定这个嵌套动态路由的问题，你遇到的情况其实很常见，主要问题出在父路由页面缺少子路由挂载点，另外先帮你明确正确的目录结构：

第一步：确认正确的目录结构 #

首先你的目录结构应该是这样的（注意层级关系）：

pages/
└── projects/
    ├── _id.vue       // 对应路由 /projects/:id
    └── _id/
        └── details.vue // 对应嵌套路由 /projects/:id/details

之前你写的格式可能有点混乱，确保details.vue确实放在_id这个子目录下，这样Nuxt才能识别它是_id.vue的子路由。

第二步：给父路由添加<nuxt-child>组件 #

这是关键！在pages/projects/_id.vue中，必须添加<nuxt-child>标签，它是子路由内容的挂载容器。如果没有这个标签，Nuxt会只渲染父路由页面，而忽略子路由。

举个简单的_id.vue示例：

<template>
  <div class="project-container">
    <h1>项目 {{ $route.params.id }}</h1>
    <!-- 子路由的内容会渲染在这里 -->
    <nuxt-child />
  </div>
</template>

<script>
export default {
  // 可以在这里获取父路由需要的数据
  async asyncData({ params }) {
    return { projectId: params.id }
  }
}
</script>

第三步：子路由页面的正常编写 #

pages/projects/_id/details.vue可以正常编写你的页面内容，比如：

<template>
  <div class="project-details">
    <h2>项目详细信息</h2>
    <p>这是项目 {{ $route.params.id }} 的详情内容</p>
  </div>
</template>

第四步：测试访问 #

现在重启Nuxt服务，访问localhost:3000/projects/1/details（注意默认端口是3000，如果你的端口不同请对应修改），就能看到父路由的内容（比如项目1的标题）加上子路由的详细信息页面了。

额外排查点 #

如果还是有问题，可以：

• 检查.nuxt/router.js文件，看看Nuxt自动生成的路由配置里，/projects/:id/details是否正确指向了details.vue组件
• 确保URL末尾没有多余的斜杠（虽然Nuxt会自动处理，但尽量保持/projects/1/details这种格式）
• 确认你使用的Nuxt版本和官方文档匹配（你参考的是Nuxt 2的文档，如果是Nuxt 3的话规则略有不同，但核心逻辑一致）

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