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的子代，因此我希望看到它们在列表中列出我访问了http://localhost:3000/parent，但未显示它们。仅当我指向其URI时，才会显示每个孩子。有人向我解释这种行为吗？

Answer 1

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

仅需一个即可使用

：

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

然后将您需要的东西放在孩子身上。

编辑：基于路由进入子页面。这是nested routes的手动方式。

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

- events
    - christmas
    - easter

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

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

1 个答案: