Nuxt nested routes

Question

Im having a basic universal app created with Nuxt.

Im new with vue and nuxt and im trying to understand how routing works, to be more specific how nested routes works.

So my projects structure is

├── parent
│   ├── child1.vue
│   └── child2.vue
├── parent.vue

and in the parent page i have two links for child1 and child2

<template>
    <div>
        <h3>Parent page</h3>
        <nuxt-link to="/parent/child1"> about1 page</nuxt-link>
        <nuxt-link to="/parent/child2"> about2 page</nuxt-link>
    </div>
</template>

My goal is when i click on the links to go to next page for example /parent/child2,

but that doesn't happens. When i click on the links it reopens the same parent page.

Answer 1

just a small hint you can also use parent/_slug.vue for your children

Answer 2

Move file parent.vue to parent/index.vue