Vue/vuetify，如何将路由器 link 添加到选项卡

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

通知 path 与 name

如果您使用named route

，则可以使用name

据我所知，如果你不使用 named route，你不能通过 props，因此你必须命名它然后

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

还要注意params必须在params对象里面

Vue/vuetify，如何将路由器 link 添加到选项卡

Vue/vuetify, how to add router link to tab

vuejs2

vuetify.js