Vue/vuetify, how to add router link to tab

问题

I would like to use the vuetify tab component simply as a navigation control, to

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

However, it doesn't seem t obe working. I thought that the to property in addition with router should work to replace href?

回答1:

EDIT 2018/11/15
Added new example: 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" },
  ],
}),

Note:
this answer worked for older vuetify version.
Tabs syntax has changed since then, and now in v1 looks like:

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

Answer still applies, but on v-tab element, instead of v-tabs-item
e.g. <v-tab :to="{path:'/path/to/somewhere'}">

Answer:

Use either:

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

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

Notice path vs name

You can use name if you are using named route

AFAIK you can't pass props if you are not using named route, thus you must name it and then

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

Also notice that params must be inside params object

来源：https://stackoverflow.com/questions/46710477/vue-vuetify-how-to-add-router-link-to-tab

标签

vuejs2

vuetify.js