javascript - 如何在 vue-router 中使用 Vuetify 选项卡

Question

我有以下 jsfiddle有两个 Vuetify 选项卡。该文档没有显示使用 vue-router 的示例。

我找到了这个 Medium.com post关于如何将 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 Tabs documentation没有在他们的 api 中指定 router Prop ，所以帖子中的嵌入式示例不起作用。

我也找到了这个StackOverflow answer其中有以下代码:

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

但是，使用 to 属性不起作用，它也没有列在 Vuetify api 中。相比之下，v-button Vuetify 组件确实列出了一个 to Prop 并利用了 vue-router，所以我希望有一个 vue -router 支持的组件以支持 to 属性。

在旧的地方挖掘old Vuetify 0.17 docs , to 属性是为 v-tabs-item 指定的。似乎在 1.0.13 中可能已删除支持。

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

Answer 1

更新

天哪!我要求 Vuetify 社区向他们的 api 添加文档，看起来他们只是将 to 属性以及其他 vue-router 属性添加到 Vuetify tabs docs .说真的，那里的社区很棒。

原始答案

Vuetify 社区 Discord 中的人们能够帮助我。我更新了jsfiddle现在有了工作代码。

本质上，v-tab 是 router-link 的包装器，我假设它使用插槽将 props 传递给 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,
});

结果