Cómo utilizar Vuetify pestañas con vue-router

Tengo el siguiente jsfiddle que tiene dos Vuetify pestañas. La documentación de no mostrar ejemplos sobre el uso de vue-router con ellos.

He encontrado este Medium.com post sobre cómo usar Vuetify con vue-router, que tiene el siguiente código:

<div id="app">
  <v-tabs grow light>
    <v-tabs-bar>
      <v-tabs-item href="/" router>
        <v-icon>motorcycle</v-icon>
      </v-tabs-item>
      <v-tabs-item href="/dog" router>
        <v-icon>pets</v-icon>
      </v-tabs-item>
    </v-tabs-bar>
  </v-tabs>

  <router-view />
</div>

Sin embargo, el código es ahora obsoleto como el Vuetify 1.0.13 Fichas de documentación no especifica un router la proposición en su api, por lo que, integrado en el ejemplo en el post no funciona.

También encontré este Respuesta de StackOverflow que tenía el siguiente código:

<v-tabs-item :to="{path:'/path/to/somewhere'}">

Sin embargo, el uso de la to la proposición no de trabajo, y también que no figuran en la Vuetify de la api. En contraste, la v-button Vuetify en el componente de lista de un to la proposición y utiliza vue-router, así que yo esperaría un vue-router componente compatible para apoyar la to prop.

Escarbando en el antiguo viejo Vuetify 0.17 docs, el to la proposición se especifica para v-tabs-item. Parece que el apoyo podría haber sido eliminado en la 1.0.13.

¿Cómo puedo utilizar vue-router con Vuetify pestañas?

InformationsquelleAutor homersimpson | 2018-04-08

5 Kommentare

  1. 37

    Actualización

    Santo wow! Le pregunté a la Vuetify de la comunidad para añadir la documentación que a su api, y parece que acaba de agregar la to prop así como otros vue-router apoyos a la Vuetify pestañas docs. En serio, la comunidad no es impresionante.

    Respuesta Original

    La gente en la Vuetify de la comunidad de la Discordia fueron capaces de ayudarme. Mi actualizados jsfiddle ahora tiene el código de trabajo.

    Esencialmente, v-tab es un contenedor para router-link, donde puedo asumir que utiliza ranuras para pasar accesorios para router-link, por lo que poner el to la proposición en v-tab funciona bien.

    El código siguiente 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

    Cómo utilizar Vuetify pestañas con vue-router
    Cómo utilizar Vuetify pestañas con vue-router

    • Gracias por esto! He creado un fork de su actualización violín para agregar una ruta por defecto a la ficha, si alguien está interesado: jsfiddle.net/thorne51/9g2zeow1/2
  2. 9

    Sólo estoy añadiendo algunos de animación de consejos relacionados con la aquí & aclarar el uso de v-tab-items vs v-tab-item.

    Si usted ha notado, mediante el trabajo de marcado de la siguiente manera impide que el v-fichas ficha interruptor de animación para trabajar:

    <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 quieres mantener la ficha interruptor de animación, esta es una manera 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 utilizar un v-for bucle en su v-tab y v-tab-item etiquetas mientras su to valor se encuentra entre los id atributo de su v-tab-items.

    Si necesita colocar su ficha contenido en un lugar diferente a tus pestañas botones, esto es lo que v-tab-items es para. Usted puede colocar el v-tab-items en un v-tab-items etiqueta fuera de la v-tabs componente. Asegúrese de darle un v-model="activeTab" atributo.

  3. 9

    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 el js parte:

      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 codesanbox ejemplo

    • El problema que veo es que al intentar hacer esto, se termina la carga de cada página dos veces. Si usted mira para mounted() vas a ver que se carga la página dos veces cuando el uso de fichas para el enrutamiento. Necesidad de encontrar una solución para esto. codesandbox.io/s/vuetify-v-fichas-con-vue-router-in1le reloj de la consola para «construir cargado» sólo debe hacer una vez, pero en realidad se monta dos veces.
    • Me lo imaginé. notó su la ruta-ver bucle que ejecuta. Usted no debe ejecutar la ruta-ver en la ficha de la matriz. Las causas a que se cargue dos veces.
    • usted está absolutamente en lo correcto. He actualizado mi respuesta y ahora debería funcionar como se espera.
  4. 3

    Las respuestas de @roli-roli y @antoni son actual, pero que carecen de un pequeño detalle. De hecho, el uso de sus métodos (casi equivalente) hay un problema en el móvil de puntos de vista; de hecho, en tales condiciones, fichas de convertirse en swipeable. El problema es que deslizar no actualización de la ruta como se esperaba, pasando de Una Ficha con Un componente de la Ficha B, con el componente B; en su lugar, una animación será despedido y la activeTab va a cambiar, pero el router no se actualizará.

    TL;DR pasar la v-tab-item no actualizar el router, y se obtiene el mismo componente en cada ficha.

    Las soluciones podría ser inhabilitar el swipeability de v-tab-item o escucha para el evento de cambio de la tab componente para actualizar el router en consecuencia. Yo aconsejaría a esta segunda solución (ya que deslizar resultados bastante útil en algunas condiciones), pero me thik que esto daría lugar a dos veces el router de actualización cuando se hace clic en la ficha etiqueta.

    He aquí un ejemplo de trabajo basados en @roli-roli respuesta

    Plantilla

    <template>
        <v-tabs v-model="activeTab">
            <v-tab v-for="tab in tabs" :key="tab.id" :to="tab.route">{{ tab.name }}</v-tab>
    
            <v-tabs-items v-model="activeTab" @change="updateRouter($event)">
                <v-tab-item v-for="tab in tabs" :key="tab.id" :to="tab.route">
                    <router-view />          
                </v-tab-item>
            </v-tabs-items>
        </v-tabs>
    </template>

    Script

    export default {
        data: () => ({
            activeTab: '',
            tabs: [
                {id: '1', name: 'Tab A', route: 'component-a'},
                {id: '2', name: 'Tab B', route: 'component-b'}
            ]
        }),
        methods: {
            updateRouter(val){
                this.$router.push(val)
            }
        }
    }

    Router

    Establecida como en las anteriores respuestas.

    • gracias! uso :valor=»ficha.ruta» en lugar de :a y <router-view>
    • sí, he corregido que miswritten router-vista. Por qué sugeriría usted para usar :valor en lugar de :a?
    • El problema que veo es que al intentar hacer esto, se termina la carga de cada página dos veces. Si usted mira para mounted() vas a ver que se carga la página dos veces cuando el uso de fichas para el enrutamiento. Necesidad de encontrar una solución para esto. codesandbox.io/s/vuetify-v-fichas-con-vue-router-in1le reloj de la consola para «construir cargado» sólo debe hacer una vez, pero en realidad se monta dos veces.
    • Me lo imaginé. notó su la ruta-ver bucle que ejecuta. Usted no debe ejecutar la ruta-ver en la ficha de la matriz. Las causas a que se cargue dos veces.
  5. 0

    El siguiente código funciona para mí

      <v-tabs fixed-tabs>
              <v-tab>Locations</v-tab>
              <v-tab>Employees</v-tab>
              <v-tab-item>Tab 1 content
                <locations-data/>
              </v-tab-item>
              <v-tab-item>Tab 2 content
                <employees-data/>
              </v-tab-item>
        </v-tabs>
       <script>
            import LocationsData from './Settings/Locations';
            import EmployeesData from './Settings/Employees';
            export default {
               components: {
                LocationsData,
                EmployeesData
              },
            }
       </script>
    • por primera vez tengo extendía la línea inferior de la ficha por primera vez de cómo resolver este problema .

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea