<nuxt-child> 组件

该组件用于显示嵌套路由场景下的页面内容。

例如：

  1. -| pages/
  2. ---| parent/
  3. ------| child.vue
  4. ---| parent.vue

上面的目录树结构会生成下面这些路由配置：

  1. [
  2.   {
  3.     path: '/parent',
  4.     component: '~pages/parent.vue',
  5.     name: 'parent',
  6.     children: [
  7.       {
  8.         path: 'child',
  9.         component: '~pages/parent/child.vue',
  10.         name: 'parent-child'
  11.       }
  12.     ]
  13.   }
  14. ]

为了显示 child.vue 组件，我们需要在父级页面组件 pages/parent.vue 中加入 <nuxt-child/>：

  1. <template>
  2.   <div>
  3.     <h1>我是父级页面</h1>
  4.     <nuxt-child/>
  5.   </div>
  6. </template>

可以看这个实际案例：嵌套路由示例