vuejs2 - Vue/Vuetify，如何将路由器链接添加到选项卡

Question

我想将vuetify选项卡组件仅用作导航控件，以

 <v-tabs dark fixed icons centered>
    <v-tabs-bar class="cyan">
      <v-tabs-slider color="yellow"></v-tabs-slider>
      <v-tabs-item router :to="{name: 'election/admin', id: this.$route.params['id']}">
        Overview
      </v-tabs-item>
    </v-tabs-bar>

  </v-tabs>

但是，这似乎并不可行。我以为 to属性以及 router应该可以代替href？

Answer 1

编辑2018/11/15
添加了新示例:codepen

<v-tabs v-model="activeTab">
  <v-tab v-for="tab in tabs" 
         :key="tab.name" 
         :to="{name: tab.name, params: id}"
  >
    {{tab.text}}
  </v-tab>
</v-tabs>

data: () => ({
  activeTab: "",
  tabs: [
    { name: "UserProfile", text: "Profile" }, 
    { name: "UserActivity", text: "Activity" },
    { name: "UserSettings", text: "Settings" },
  ],
}),

笔记:
此答案适用于较旧的 vuetify版本。
此后，Tabs语法发生了变化，现在 v1中的样子如下:

<v-tabs>
    <v-tab>Tab 1</v-tab>
    <v-tab>Tab 2</v-tab>
    <v-tab-item>Tab 1 content</v-tab-item>
    <v-tab-item>Tab 2 content</v-tab-item>
</v-tabs>

答案仍然适用，但适用于 v-tab元素，而不是 v-tabs-item例如 <v-tab :to="{path:'/path/to/somewhere'}">
答案:

使用以下任一方法:

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

或者

<v-tabs-item :to="{name:'RouteName'}">

注意 path与 name
如果您使用的是 named route，则可以使用 name
AFAIK如果您不使用 props，则不能传递 named route，因此必须先命名它，然后

:to="{name: 'RouteName', params: {id: $route.params['id'] }}"

还要注意，参数必须在 params对象内