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

Posted 2023-02-22

【中文标题】Nuxt.js：理解 <nuxt-child> 组件

【英文标题】：Nuxt.js: understanding <nuxt-child> component

【发布时间】：2019-03-09 23:53:44

【问题描述】：

在 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 时，才会显示每个孩子。有人向我解释这种行为吗？

【参考方案1】：

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

只需使用一个即可：

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

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

编辑：子页面是根据路由引入的。这是手动操作nested routes。

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

- events
    - christmas
    - easter

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

【讨论】：

你所说的我都知道，希望你能根据路线详细说明，因为我觉得真正的解释就在附近。谢谢

当我导航到子页面时，如何在不渲染父页面内容的情况下维护“父/子”的嵌套 uri？

@JacobKochocki 我认为这更像是一个 Vue 路由器问题，我认为没有办法做到这一点