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版本.
标签语法从那时起已经改变,现在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'}">

通知pathvsname

name如果使用命名路由,则可以使用

props如果您不使用AFAIK,则无法通过named route,因此您必须将其命名

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

另请注意,参数必须在params对象内