I have a Nuxt app with a list of cars available at: /cars. You can select a specific car at /cars/:id. I would like to have a toolbar that routes to different views such as: /cars/:id/routes, /cars/:id/drivers, etc.
Within the /cars/:id page, I have created a toolbar and a div using <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" the whole page changes, but I want to keep the toolbar in place. What am 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