Vue/vuetify，如何将路由器链接添加到选项卡 [英] Vue/vuetify, how to add router link to tab

问题描述

我想简单地使用 vuetify 选项卡组件作为导航控件，以

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>

但是，它似乎不起作用.我认为 to 属性加上 router 应该可以代替 href?

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

推荐答案

EDIT 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 中看起来像:

---

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>

答案仍然适用，但在 v-tab 元素上，而不是 v-tabs-item
例如

Answer still applies, but on v-tab element, instead of v-tabs-item
e.g. <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，则可以使用 name路线

You can use name if you are using named route

AFAIK 如果你没有使用 named route，你就不能通过 props，因此你必须先给它命名，然后

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

还要注意params必须在params对象内

Also notice that params must be inside params object

这篇关于Vue/vuetify，如何将路由器链接添加到选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！