i have Nuxt app that have list of cars: /cars, there you can choose specyfic one /cars/:id. I want inside a toolbar that route to diffrent views: */cars/:id/routes, */cars/:id/drivers etc.

Inside /cars/:id i create toolbar and div with <NuxtChild />

<template>
  <v-container>
    <v-toolbar flat class="rounded-pill " height="50">
      <v-tabs centered slider-color="#356FA4" color="#55BAB4" icons-and-text>
        <v-tab>Overview<v-icon>fa-eye</v-icon></v-tab>
        <v-tab :to="`${$route.params.id}/gauges`"
          >Gauges <v-icon>mdi-gauge</v-icon></v-tab
        >
        <v-tab>Routes <v-icon>mdi-map-marker</v-icon></v-tab>
        <v-tab>Drivers <v-icon>fa-users</v-icon></v-tab>
        <v-tab>Damages <v-icon>fa-car-crash</v-icon></v-tab>
        <v-tab>Documents <v-icon>mdi-file-document-outline</v-icon></v-tab>
        <v-tab>Reminders <v-icon>mdi-alarm</v-icon></v-tab>
      </v-tabs>
    </v-toolbar>
    <div>
      <NuxtChild />
    </div>
  </v-container>
</template>

When i click on gauges whole page change, i want to keep toolbar in place. What i missing?

Folder structure:

|   index.vue
|   login.vue
|   map.vue
|   organization.vue
|   register.vue
|
 ---cars
|   |   index.vue
|   |
|   \---_id
|           gauges.vue
|           index.vue
|
\---users
    |   index.vue
    |
    \---_id
            index.vue

what i want

CodePudding user response：

I test it right now and figured out that you should just put _id.vue file instead of _id/index.vue. So your folder should be something like this:

 ---cars
|   |   index.vue
|   |   _id.vue (move your parent codes here)
|   \---_id
|           gauges.vue
|

Also there is a good example in nuxt nested pages docs:

pages/parent.vue contains the component. Everything on this page will be seen on both the parent and child pages.

pages/parent/index.vue contains text that will be replaced when the child links are clicked.

pages/parent/child.vue and pages/parent/child2.vue will be rendered as parent/child and parent/child2.