Nuxt根页面配置<nuxt-child>后子路由未渲染父页面内容是什么原因？

问题根源是Nuxt默认的路由生成规则不符合嵌套需求，当前的文件结构被Nuxt解析为平级路由，不存在父子嵌套关系，所以不会触发<nuxt-child>的内容注入。

Nuxt嵌套路由核心规则 #

Nuxt的自动嵌套路由要求遵循「同名文件+同名目录」的匹配规则：如果需要某页面作为父布局承载子路由，需要在pages目录下创建和父页面同名的文件夹，所有子路由页面放入该文件夹内，父页面中保留<nuxt-child>作为子内容占位符。

现有结构的问题 #

你当前将index.vue和child.vue都放在pages根目录下，Nuxt会默认生成两个平级路由：

• / 对应index.vue
• /child 对应child.vue

二者没有从属关系，因此访问/child时不会加载index.vue的内容，只会单独渲染child.vue。

解决方案 #

方案一：调整文件结构（推荐，无需额外配置） #

修改后的页面结构如下：

./pages/index.vue          // 对应'/'路径的父页面，原有代码不需要修改
./pages/index/child.vue    // 对应'/child'路径的子页面，原有代码不需要修改

调整后Nuxt会自动识别嵌套路由关系，访问/child时就会在index.vue的<nuxt-child>位置渲染child.vue的内容。

方案二：手动配置路由（适合不想修改文件结构的场景） #

在项目根目录的nuxt.config.js中添加路由扩展配置：

export default {
  router: {
    extendRoutes(routes, resolve) {
      // 定位根路径对应的路由配置
      const indexRoute = routes.find(route => route.path === '/')
      // 给根路由添加子路由配置
      indexRoute.children = [
        {
          path: 'child',
          component: resolve(__dirname, 'pages/child.vue'),
          name: 'child'
        }
      ]
    }
  }
}

配置完成后重启项目即可生效。

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