Nuxt.js：理解 <nuxt-child> 组件

Question

在 Nuxt.js 中，我做了这个文件夹结构：

??? parent
?   ??? child1.vue
?   ??? child2.vue
??? parent.vue

在parent.vue 中，我有这个：

<template>
    <div>
        <h3>Parent element</h3>
        <ul>
            <li><nuxt-child/></li>
            <li><nuxt-child/></li>
        </ul>
    </div>
</template>

在child1.vue 中：

<template>
    <div>
        <h3>Child 1</h3>
    </div>
</template>

在child2.vue 中：

<template>
    <div>
        <h3>Child 2</h3>
    </div>
</template>

我启动服务器（yarn run dev）并转到这个URI：http://localohost:3000/parent我看到这个：

Parent element    
     - 
     -  

如果我去http://localohost:3000/parent/child1，我会看到：

Parent element    
     - Child 1
     - Child 1

如果我去http://localohost:3000/parent/child2，我会看到：

Parent element    
     - Child 2
     - Child 2

题：

从文档中，我了解到child1.vue和child2.vue是parent.vue的孩子，所以我希望在我访问时看到它们的列表http://localhost:3000/parent，但它们没有显示出来。仅当我指向其 URI 时才显示每个子项。任何人都可以向我解释这种行为？

Answer 1

这<nuxt-child/>是基于route子组件的替代品。

使用一个就是你所需要的：

<template>
    <div>
        <h3>Parent element</h3>
        <nuxt-child/>
    </div>
</template>

然后把你需要的东西放在孩子身上。

编辑：根据路线引入子页面。这是进行嵌套路由的手动方式。

例如，假设我有一些事件。父页面是event，然后每个事件都是一个子页面。

- events
    - christmas
    - easter

当我转到events/christmas或 时events/easter，我会看到“活动”页面，但会显示我想要的活动内容。父页面events/可能只包含我要访问的所有事件的列表。