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

Question

我有以下具有两个 Vuetify 选项卡的 jsfiddle。该文档没有显示使用 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 Tabs 文档 没有在他们的 api 中指定 router ，因此代码现在已经过时，因此帖子中的嵌入式示例不起作用。

我还发现了这个 StackOverflow 答案，其中包含以下代码：

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

但是，使用 to 不起作用，并且它也没有在 Vuetify api 中列出。 In contrast, the v-button Vuetify component does list a to prop and vue-router , so I would expect a vue-router supported component to support to 道具。

在 旧的 Vuetify 0.17 文档 中挖掘， to 被指定为 v-tabs-item 。似乎支持可能已在 1.0.13 中删除。

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

原文由 homersimpson 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

更新

圣哇！我要求 Vuetify 社区将文档添加到他们的 api 中，看起来他们只是将 to 道具以及其他 vue-router 道具添加到了 Vuetify 选项卡文档 中。说真的，那里的社区很棒。

原始答案

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

Essentially, v-tab is a wrapper for router-link , where I assume it uses slots to pass props to router-link , so putting the to prop在 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,
});

结果

原文由 homersimpson 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

模板部分：

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

还有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` }
      ]
    };
  }

路线：

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

参见代码框示例

原文由 Roland 发布，翻译遵循 CC BY-SA 4.0 许可协议