我想将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?

最佳答案

编辑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'}">

注意pathname
如果您使用的是named route,则可以使用name
AFAIK如果您不使用props,则不能传递named route,因此必须先命名它,然后
:to="{name: 'RouteName', params: {id: $route.params['id'] }}"

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

10-05 20:29
查看更多