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 运行 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，所以我希望在访问 http://localhost:3000/parent 时看到它们的列表，但它们没有显示。只有当我指向其 URI 时才会显示每个子项。有人可以向我解释这种行为吗？

Answer 1

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

只需要一个就够了：

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

然后将您需要的不同之处放入 child。

编辑：child页面是根据路由引入的。这是 nested routes.

的手动方式

例如，假设我有一些活动。 parent页面是event，然后每个事件都是child.

- events
    - christmas
    - easter

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

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

Nuxt.js: understanding <nuxt-child> component

javascript

vue.js

nuxt.js