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
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.