Nuxt 嵌套页面

Question

Having this directories:

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

I am navigating to localhost:3000/page1 and pages/page1/index.vue is being loaded.

Now I want to place two links inside index.vue so I can render the children components inside its parent 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>

however when I click the links, I get redirected to localhost:3000/page1/child1 so I lose the layout from parent.

Am I missing anything?

Answer 1

pages/page1.vue seems to be missing.

<template>
  <div>
    <h1>I am the parent view</h1>
    <NuxtChild />
  </div>
</template>

Answer 2

You need to do the following changes:

1. Rename and move pages/page1/index.vue to pages/page1.vue
2. Make all links absolute. For example, "page1/child1" must become "/page1/child1"
3. (Optional) If you want to display some content in NuxtChild when no child route is selected, then place this content in pages/page1/index.vue