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

如果您使用的是named route
，则可以使用name
AFAIK如果您不使用props，则无法通过named route，因此您必须将其命名，然后

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

另请注意，params必须位于params对象
中

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

1 个答案: