javascript - Nuxt.js:理解 组件

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

问题:

来自documentation ，我知道 child1.vue 和 child2.vue 是 parent.vue 的 child ，所以我希望在访问 http://localhost 时看到它们的列表:3000/parent，但没有显示。只有当我指向其 URI 时才会显示每个子项。有人可以向我解释这种行为吗？

Answer 1

<nuxt-child/>是子组件的替代品，基于路线。

只需要一个就够了:

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

然后把你需要的不同的放在 child 身上。

编辑:根据路由引入子页面。这是一种手动方式nested routes .

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

- events
    - christmas
    - easter

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