Tengo la aplicación Nuxt que tiene una lista de autos: /cars , allí puedes elegir uno específico /cars/:id . Quiero dentro de una barra de herramientas que enrute a diferentes vistas: * /cars/:id/routes , * /cars/:id/drivers etc.
Dentro de /cars/:id creo barra de herramientas y div con <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>Cuando hago clic en los indicadores de cambio de página completa, quiero mantener la barra de herramientas en su lugar. ¿Qué me falta?
Estructura de carpetas:
| index.vue | login.vue | map.vue | organization.vue | register.vue | +---cars | | index.vue | | | \---_id | gauges.vue | index.vue | \---users | index.vue | \---_id index.vueLo pruebo ahora mismo y descubrí que deberías poner el archivo _id.vue en lugar de _id/index.vue . Así que tu carpeta debería ser algo como esto:
+---cars | | index.vue | | _id.vue (move your parent codes here) | \---_id | gauges.vue |También hay un buen ejemplo en los documentos de páginas anidadas de nuxt:
pages/parent.vue contiene el componente. Todo en esta página se verá tanto en la página principal como en la secundaria.
pages/parent/index.vue contiene texto que se reemplazará cuando se haga clic en los enlaces secundarios.
pages/parent/child.vue y pages/parent/child2.vue se representarán como parent/child y parent/child2.