NuxtChild问题：访问子路由仅显示子组件，父组件内容未渲染

你的问题出在对Nuxt路由规则的误解上，具体错误点和修正方案如下：

错误原因 #

1. 路由匹配不对应
   根目录下的_collection.vue是一级动态路由组件，对应的路由是/:collection（比如访问/test会触发这个组件），但你访问的/collection/bicycle是二级路由，完全不会匹配到这个组件。
   你写的category/index.vue对应的路由是/category（若放在根目录category文件夹下），和/collection/bicycle路径无关联，当前显示的内容其实是对应该路径的其他组件，和你编写的_collection.vue、category/index.vue无关。

2. 嵌套路由结构错误
   你想要的父组件嵌套子组件效果，需要遵循Nuxt的嵌套路由规则：父组件必须是与子组件所在文件夹同名的.vue文件，而非下划线开头的动态路由文件。

修正方案 #

若要实现访问/collection/bicycle时同时显示父、子组件内容，需调整pages目录结构如下：

pages/
├── collection.vue       # 父组件，对应/collection路由，作为子路由的布局容器
└── collection/          # 与父组件同名的文件夹，存放子路由组件
    └── bicycle.vue      # 子组件，对应/collection/bicycle路由

修改collection.vue内容（去掉文件名前的下划线）：

<div>
  This is a collection
  <NuxtChild />
</div>

collection/bicycle.vue内容保持不变：

<div>
  This is a Bicycle Page
</div>

此时访问http://localhost:3000/collection/bicycle，就会同时显示父组件的"This is a collection"和子组件的"This is a Bicycle Page"。

如果需要支持/collection/xxx这类动态子路由，可将bicycle.vue改为_slug.vue，这样所有/collection/xxx路径都会匹配该子组件，父组件内容也会正常展示。

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