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

Question

我有以下jsfiddle有两个Vuetify选项卡.该文档未显示vue-router与它们一起使用的示例.

我发现了这个关于如何使用Vuetify的Medium.com帖子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文档未router在其api中指定prop,因此帖子中的嵌入示例不起作用.

我还发现这个StackOverflow答案有以下代码:

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

但是,使用to道具不起作用,它也没有在Vuetify api中列出.相比之下,v-buttonVuetify组件确实列出了一个to道具和利用vue-router,所以我希望vue-router支持的组件支持to道具.

在旧的Vuetify 0.17文档中挖掘,to道具是指定的v-tabs-item.看来支持可能已在1.0.13中删除.

我如何使用vue-routerVuetify标签？

Answer 1

更新

圣哇!我要求Vuetify社区为他们的api添加文档,看起来他们只是将to道具以及其他vue-router道具添加到Vuetify标签文档中.说真的,社区很棒.

原始答案

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

结果

Answer 2

我只是在这里添加一些与动画相关的提示并澄清v-tab-itemsvs 的使用v-tab-item.

如果您注意到,使用如下工作标记可以防止v-tabs选项卡切换动画工作:

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

如果要保留制表符切换动画,这是一种方法.

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

请注意,只要在s 的属性中找到您的值,您也可以v-for在v-tab和v-tab-item标签上使用循环.toidv-tab-item

如果您需要将标签内容放在与标签按钮不同的位置,则可以使用此选项v-tab-items.您可以将v-tab-items放在组件v-tab-items外部的标签中v-tabs.确保给它一个v-model="activeTab"属性.

Answer 3

模板部分：

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

参见codesanbox示例