Как использовать вкладки Vuetify с Vue-маршрутизатором

у меня есть следующие jsfiddle имеет две вкладки Vuetify. В документации не показаны примеры использования vue-router С ними.

я нашел это Medium.com пост о том, как использовать Vuetify с vue-router, который имеет следующий код:

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

однако код теперь устарел как Vuetify 1.0.13 вкладки документация не указан router prop в их api, поэтому встроенный пример в сообщении не работает.

я нашел это StackOverflow ответ, который имел следующий код:

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

однако, используя to prop не работает, и он также не указан в api Vuetify. В отличие от v-button компонент Vuetify перечисляет to prop и использует vue-router, поэтому я ожидал бы vue-router поддерживаемый компонент для поддержки to проп.

копаться в старом старый Vuetify 0.17 docs, the to prop указывается для v-tabs-item. Кажется, что поддержка могла быть удалена в 1.0.13.

как я могу использовать vue-router с вкладками Vuetify?

8
javascript vue.js vuejs2 vuetify.js

1 ответов

обновление

Боженьки! Я попросил сообщество Vuetify добавить документацию в свой api, и похоже, что они просто добавили to prop, а также другие vue-router реквизит Vuetify tabs docs. Серьезно, сообщество там потрясающее.

Оригинальный Ответ

люди в сообществе Vuetify Discord смогли мне помочь. Мой обновленный jsfiddle теперь рабочая код.

по сути, v-tab - это оболочка для router-link, где я предполагаю, что он использует слоты для передачи реквизита router-link, так что ставить to проп на v-tab работает нормально.

следующий код является примером рабочего кода:

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,
});

результат

Foo tab example Bar tab example

6