时间戳

首页 > 解决方案 > 尽管使用了 Nuxt 根页面（父），但不会为子路由呈现在父母

nuxt.js - 尽管使用了 Nuxt 根页面（父），但不会为子路由呈现在父母

问题描述

我有一个简单的文件设置：

页面结构：

./pages/index.vue     // root page to be displayed for '/'
./pages/child.vue     // sub-page to be displayed inside index.vue for '/child'

index.vue：

<template>
  <div>
    <p>This is parent</p>
    <some-component-from-components></some-component-from-components>
    <nuxt-child />
   </div>
</template>

child.vue：

<template>
  <div>
    <p>This is Child</p>
  </div>
</template>

我希望对于'/'路由index.vue将显示，对于嵌入在占位符中的'/child'路由。路线按预期工作，但是显示了 for just 。index.vuechild.vue<nuxt-child />'/''/child'child.vue

为什么？<nuxt-child />不适用于根页面还是有其他问题？

标签： nuxt.js

解决方案

如果您想要这种行为，您需要将child组件嵌套在目录中。index在这里，您确实在同一级别上拥有两者，因此为什么您不能将一个嵌套到另一个中。

更多信息在这里：https ://nuxtjs.org/docs/2.x/features/nuxt-components#the-nuxtchild-component

有关路由结构的更多详细信息：https ://nuxtjs.org/docs/2.x/features/file-system-routing#nested-routes

推荐阅读