Actualizar

¡Santo guau! Le pedí a la comunidad de Vuetify que agregara documentación a su API, y parece que acaban de agregar to prop, así como otros accesorios de vue-router a los documentos de las pestañas de Vuetify . En serio, la comunidad allí es impresionante.

Respuesta original

La gente de la comunidad de Vuetify Discord pudo ayudarme. Mi jsfiddle actualizado ahora tiene el código de trabajo.

Esencialmente, v-tab es un envoltorio para router-link , donde asumo que usa ranuras para pasar accesorios a router-link , por lo que poner el to prop en v-tab funciona bien.

El siguiente código es un ejemplo del código de trabajo:

html

 <v-app dark> <v-tabs fixed-tabs> <v-tab to="/foo">Foo</v-tab> <v-tab to="/bar">Bar</v-tab> </v-tabs> <router-view></router-view> </v-app>

js

 const Foo = { template: '<div>Foo component!</div>' }; const Bar = { template: '<div>Bar component!</div>' }; const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar }, ]; const router = new VueRouter({ routes }); new Vue({ el: '#app', router, });

Resultado

La parte de la plantilla:

 <div> <v-tabs class="tabs" centered grow height="60px" v-model="activeTab" > <v-tab v-for="tab in tabs" :key="tab.id" :to="tab.route" exact> {{ tab.name }} </v-tab> </v-tabs> <router-view></router-view> </div>

Y la parte js:

 data() { return { activeTab: `/user/${this.id}`, tabs: [ { id: 1, name: "Task", route: `/user/${this.id}` }, { id: 2, name: "Project", route: `/user/${this.id}/project` } ] }; }

Rutas:

 { path: "/user/:id", component: User1, props: true, children: [ { path: "", //selected tab by default component: TaskTab }, { path: "project", component: ProjectTab } ] }

Ver ejemplo de codesanbox

Solo estoy agregando algunos consejos relacionados con la animación aquí y aclarando el uso de v-tab-items vs v-tab-item .

Si lo ha notado, el uso del marcado de trabajo de la siguiente manera evita que funcione la animación de cambio de pestaña v-tabs:

 <v-tabs v-model="activeTab"> <v-tab key="tab-1" to="/tab-url-1">tab 1</v-tab> <v-tab key="tab-2" to="/tab-url-2">tab 2</v-tab> </v-tabs> <router-view />

Si desea mantener la animación de cambio de pestaña, esta es una forma de hacerlo.

 <v-tabs v-model="activeTab"> <v-tab key="tab-1" to="/tab-url-1" ripple> tab 1 </v-tab> <v-tab key="tab-2" to="/tab-url-2" ripple> tab 2 </v-tab> <v-tab-item id="/tab-url-1"> <router-view v-if="activeTab === '/tab-url-1'" /> </v-tab-item> <v-tab-item id="/tab-url-2"> <router-view v-if="activeTab === '/tab-url-2'" /> </v-tab-item> </v-tabs>

Tenga en cuenta que también puede usar un bucle v-for en sus v-tab y v-tab-item siempre to su valor se encuentre entre el atributo id de sus v-tab-item s.

Si necesita colocar el contenido de sus pestañas en un lugar diferente a los botones de sus pestañas, esto es para lo que sirve v-tab-items . Puede colocar los v-tab-item s en una v-tab-items fuera del componente v-tabs . Asegúrese de darle un atributo v-model="activeTab" .