尽管在父级中使用了 <nuxt-child>，但 Nuxt 根页面（父级）不会为子路由呈现

Question

我有一个简单的文件设置：

页面结构：

./pages/index.vue     // root page to be displayed for '/'
./pages/child.vue     // sub-page to be displayed inside index.vue for '/child'

index.vue

:

<template>
  <div>
    <p>This is parent</p>
    <some-component-from-components></some-component-from-components>
    <nuxt-child />
   </div>
</template>

child.vue

:

<template>
  <div>
    <p>This is Child</p>
  </div>
</template>

我希望对于

'/'

路线，将显示

index.vue

，对于

'/child'

路线

index.vue

，将在

child.vue

占位符中嵌入

<nuxt-child />

。

'/'

路线按预期工作，但是对于

'/child'

，仅显示

child.vue

。

为什么？

<nuxt-child />

不适用于根页面还是还有其他问题？

Answer 1

如果您想要这种行为，则需要将

child

组件嵌套在

index

目录中。在这里，两者确实处于同一级别，因此为什么不能将一个嵌套到另一个中。

更多信息在这里：https://nuxtjs.org/docs/2.x/features/nuxt-components#the-nuxtchild-component

有关路由结构的更多详细信息：https://nuxtjs.org/docs/2.x/features/file-system-routing#nested-routes