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

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

1 个答案: