Nuxt嵌套页面跳转丢失父组件布局问题求助

现有目录结构如下：

|-- pages
      |--page1
      |     |--index.vue
      |     |--child1.vue
      |     |--child2.vue
      |
      |--page2

访问 localhost:3000/page1 时，pages/page1/index.vue 会被加载。我希望在 index.vue 中添加两个链接，使子组件能在父组件 index.vue 内部渲染，编写的代码如下：

index.vue #

<template>
    <v-container>
        <h1>I am the parent view</h1>
    <nav>
      <ul>
        <li>
          <NuxtLink to="page1/child1">Child</NuxtLink>
        </li>
        <li>
          <NuxtLink to="page1/child2">Child 2</NuxtLink>
        </li>
      </ul>
    </nav>
    <NuxtChild  />
    </v-container>
</template>
<script>
export default {
    
}
</script>

child1.vue #

<template>
    <v-container>
      <h5>child1</h5>
    </v-container>
  </template>

child2.vue #

<template>
    <v-container>
      <h5>child2</h5>
    </v-container>
  </template>

但点击链接后，页面会跳转到 localhost:3000/page1/child1，同时丢失父组件的布局。请问我哪里操作有误？

问题出在目录结构不符合Nuxt嵌套路由的规则，按以下两步修改即可解决：

1. 调整目录结构
   Nuxt的嵌套路由要求子组件必须放在与父路由同名的子目录下，调整后的结构如下：

   |-- pages
         |--page1
         |     |--index.vue
         |     |--page1          <!-- 新增与父路由同名的子目录 -->
         |           |--child1.vue
         |           |--child2.vue
         |
         |--page2
   

2. 修正NuxtLink的路径
   把链接路径改成相对路径或者正确的嵌套路由绝对路径：

   <!-- 相对路径写法 -->
   <NuxtLink to="./child1">Child</NuxtLink>
   <NuxtLink to="./child2">Child 2</NuxtLink>
   
   <!-- 绝对路径写法 -->
   <NuxtLink to="/page1/child1">Child</NuxtLink>
   <NuxtLink to="/page1/child2">Child 2</NuxtLink>
   

修改完成后，点击链接时子组件就会渲染在父组件的<NuxtChild />位置，父组件的布局也会保留。

内容的提问来源于stack exchange，提问作者E. Williams