如何将 Vuetify 选项卡与 vue-router 一起使用

我有以下内容jsfiddle https://jsfiddle.net/jjloneman/e5a6L27u/12/有两个 Vuetify 选项卡。该文档没有显示使用示例vue-router跟他们。

我找到了这个Medium.com 帖子 https://medium.com/front-end-hacking/vue-js-mobile-navbar-using-vuetify-803856f00dfd关于如何使用 Vuetifyvue-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 选项卡文档 https://vuetifyjs.com/en/components/tabs没有指定routerprop 在他们的 api 中，所以帖子中的嵌入示例不起作用。

我也发现了这个堆栈溢出答案 https://stackoverflow.com/questions/46710477/vue-vuetify-how-to-add-router-link-to-tab其中有以下代码：

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

然而，使用toprop 不起作用，并且它也没有在 Vuetify api 中列出。相比之下，v-buttonVuetify 组件确实列出了to道具和利用vue-router，所以我期望vue-router支持的组件支持to prop.

在旧的地方挖掘旧 Vuetify 0.17 文档 https://vuetifyjs.com/releases/0.17/#/components/tabs#api, the toprop 指定为v-tabs-item。看来该支持可能已在 1.0.13 中被删除。

我该如何使用vue-router使用 Vuetify 选项卡？

Update

圣哇！我要求 Vuetify 社区向他们的 api 添加文档，看起来他们刚刚添加了to道具以及其他vue-router道具Vuetify 选项卡文档 https://vuetifyjs.com/en/components/tabs。说实话，那里的社区很棒。

原答案

Vuetify 社区 Discord 中的人们能够帮助我。我的更新了jsfiddle https://jsfiddle.net/jjloneman/e5a6L27u/26/现在有了工作代码。

本质上，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,
});

Result