我想将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'}">
注意
path
与name
如果您使用的是named route,则可以使用
name
AFAIK如果您不使用
props
,则不能传递named route
,因此必须先命名它,然后:to="{name: 'RouteName', params: {id: $route.params['id'] }}"
还要注意,参数必须在
params
对象内