尽管在父级中使用 <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 将在<nuxt-child /> 占位符中嵌入child.vue。 '/' 路由按预期工作，但 '/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