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

GO村村2020-03-11

我有以下的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 Tabs文档未router在其api中指定道具，因此该帖子中的嵌入式示例不起作用。

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

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

但是，使用该to道具不起作用，而且Vuetify api中也未列出该道具。相比之下，v-buttonVuetify组件确实列出了toprop并利用vue-router，因此我希望vue-router受支持的组件能够支持toprop。

在旧的旧版Vuetify 0.17文档中四处搜寻，该to道具指定为v-tabs-item。似乎该支持可能已在1.0.13中删除。

如何vue-router与Vuetify标签一起使用？

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

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