Javascript 如何在 vue-router 中使用 Vuetify 选项卡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49721710/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use Vuetify tabs with vue-router
提问by homersimpson
I have the following jsfiddlethat has two Vuetify tabs. The documentation doesn't show examples on using vue-routerwith them.
我有以下jsfiddle，它有两个 Vuetify 选项卡。文档没有显示vue-router与它们一起使用的示例。
I found this Medium.com poston how to use Vuetify with vue-router, which has the following code:
我找到了这篇关于如何使用 Vuetify 的Medium.com 帖子vue-router，其中包含以下代码：
<div id="app">
<v-tabs grow light>
<v-tabs-bar>
<v-tabs-item href="/" router>
<v-icon>motorcycle</v-icon>
</v-tabs-item>
<v-tabs-item href="/dog" router>
<v-icon>pets</v-icon>
</v-tabs-item>
</v-tabs-bar>
</v-tabs>
<router-view />
</div>
However, the code is now outdated as the Vuetify 1.0.13 Tabs documentationdoesn't specify a routerprop in their api, so the embedded example in the post doesn't work.
但是，代码现在已经过时，因为Vuetify 1.0.13 Tabs 文档没有router在他们的 api 中指定prop，所以帖子中的嵌入示例不起作用。
I also found this StackOverflow answerwhich had the following code:
我还发现了这个StackOverflow 答案，其中包含以下代码：
<v-tabs-item :to="{path:'/path/to/somewhere'}">
However, using the toprop doesn't work and it's also not listed in the Vuetify api. In contrast, the v-buttonVuetify component does list a toprop and utilizes vue-router, so I would expect a vue-routersupported component to support the toprop.
但是，使用toprop 不起作用，它也没有列在 Vuetify api 中。相比之下，v-buttonVuetify 组件确实列出了一个toprop 并使用了vue-router，所以我希望vue-router支持的组件支持该toprop。
Digging around in the old old Vuetify 0.17 docs, the toprop is specified for v-tabs-item. It seems that support might have been removed in 1.0.13.
在旧的旧 Vuetify 0.17 文档中挖掘，to道具被指定为v-tabs-item. 似乎支持可能已在 1.0.13 中删除。
How can I use vue-routerwith Vuetify tabs?
如何vue-router与 Vuetify 选项卡一起使用？
采纳答案by homersimpson
Update
更新
Holy wow! I asked the Vuetify community to add documentation to their api, and it looks like they just added the toprop as well as other vue-routerprops to the Vuetify tabs docs. Seriously, the community there is awesome.
圣哇！我要求 Vuetify 社区向他们的 api 添加文档，看起来他们只是将toprop 以及其他vue-routerprops 添加到Vuetify tabs docs。说真的，那里的社区很棒。
Original Answer
原答案
The folks in the Vuetify community Discord were able to help me out. My updated jsfiddlenow has the working code.
Vuetify 社区 Discord 中的人能够帮助我。我更新的jsfiddle现在有工作代码。
Essentially, v-tabis a wrapper for router-link, where I assume it uses slots to pass props to router-link, so putting the toprop on v-tabworks fine.
本质上，v-tab是 的包装器router-link，我假设它使用插槽将道具传递给router-link，因此将to道具放在上面v-tab效果很好。
The following code is an example of the working code:
以下代码是工作代码的示例：
html
html
<v-app dark>
<v-tabs fixed-tabs>
<v-tab to="/foo">Foo</v-tab>
<v-tab to="/bar">Bar</v-tab>
</v-tabs>
<router-view></router-view>
</v-app>
js
js
const Foo = {
template: '<div>Foo component!</div>'
};
const Bar = {
template: '<div>Bar component!</div>'
};
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar },
];
const router = new VueRouter({ routes });
new Vue({
el: '#app',
router,
});
Result
结果
回答by roli roli
The template part:
模板部分：
<div>
<v-tabs
class="tabs"
centered
grow
height="60px"
v-model="activeTab"
>
<v-tab v-for="tab in tabs" :key="tab.id" :to="tab.route" exact>
{{ tab.name }}
</v-tab>
</v-tabs>
<router-view></router-view>
</div>
And the js part:
和 js 部分：
data() {
return {
activeTab: `/user/${this.id}`,
tabs: [
{ id: 1, name: "Task", route: `/user/${this.id}` },
{ id: 2, name: "Project", route: `/user/${this.id}/project` }
]
};
}
Routes:
路线：
{
path: "/user/:id",
component: User1,
props: true,
children: [
{
path: "", //selected tab by default
component: TaskTab
},
{
path: "project",
component: ProjectTab
}
]
}
回答by antoni
I'm just adding some animation-related tips here & clarifying the use of v-tab-itemsvs v-tab-item.
我只是在这里添加一些与动画相关的技巧并阐明v-tab-itemsvs的使用v-tab-item。
If you have noticed, using the working markup as follows prevents the v-tabs tab switch animation to work:
如果您已经注意到，使用如下工作标记会阻止 v-tabs 选项卡切换动画工作：
<v-tabs v-model="activeTab">
<v-tab key="tab-1" to="/tab-url-1">tab 1</v-tab>
<v-tab key="tab-2" to="/tab-url-2">tab 2</v-tab>
</v-tabs>
<router-view />
If you want to keep the tab switch animation, this is a way to do it.
如果您想保留选项卡切换动画，这是一种方法。
<v-tabs v-model="activeTab">
<v-tab key="tab-1" to="/tab-url-1" ripple>
tab 1
</v-tab>
<v-tab key="tab-2" to="/tab-url-2" ripple>
tab 2
</v-tab>
<v-tab-item id="/tab-url-1">
<router-view v-if="activeTab === '/tab-url-1'" />
</v-tab-item>
<v-tab-item id="/tab-url-2">
<router-view v-if="activeTab === '/tab-url-2'" />
</v-tab-item>
</v-tabs>
Note that you can also use a
v-forloop on yourv-tabandv-tab-itemtags as long as yourtovalue is found among theidattribute of yourv-tab-items.If you need to place your tab contents in a different place than your tabs buttons, this is what
v-tab-itemsis for. You can place thev-tab-items in av-tab-itemstag outside of thev-tabscomponent. Make sure you give it av-model="activeTab"attribute.
请注意，只要在s的属性中找到您的值，您也可以
v-for在v-tab和v-tab-item标签上使用循环。toidv-tab-item如果您需要将标签内容放置在与标签按钮不同的位置，这就是
v-tab-items它的用途。您可以将v-tab-items 放在组件v-tab-items外部的标签中v-tabs。确保你给它一个v-model="activeTab"属性。
回答by Gabriel Rambaud
The answers of @roli-roli and @antoni are currect but lacking of a tiny detail. In fact, using their methods (almost equivalent) there is an issue in mobile views; in fact, in such conditions tabs become swipeable. The problem is that swiping won't update the route as expected, passing from Tab A with component A to Tab B with component B; instead, an animation will be fired and the activeTabwill change, but the router won't update.
@roli-roli 和@antoni 的答案是正确的，但缺乏细节。事实上，使用他们的方法（几乎等价）在移动视图中存在问题；事实上，在这种情况下，标签变得可滑动。问题是滑动不会按预期更新路由，从带有组件 A 的 Tab A 传递到带有组件 B 的 Tab B；相反，将触发动画并activeTab更改，但路由器不会更新。
TL;DR Swiping the v-tab-itemdoes not update the router, and you get the same component under each tab.
TL;DR 刷卡v-tab-item不会更新路由器，您会在每个选项卡下获得相同的组件。
Solutions could be either disable the swipeability of v-tab-itemor listening to the change event of the tabcomponent to update the router accordingly. I would advise this second solution (since swiping results pretty handy in some conditions), but I thik that this would trigger twice the router update when clicking on the tab's label.
解决方案可以是禁用可滑动性v-tab-item或侦听tab组件的更改事件以相应地更新路由器。我会建议第二种解决方案（因为在某些情况下刷卡结果非常方便），但我认为这会在单击选项卡的标签时触发两次路由器更新。
Here's a working example based on @roli-roli answer
这是一个基于@roli-roli 答案的工作示例
Template
模板
<template>
<v-tabs v-model="activeTab">
<v-tab v-for="tab in tabs" :key="tab.id" :to="tab.route">{{ tab.name }}</v-tab>
<v-tabs-items v-model="activeTab" @change="updateRouter($event)">
<v-tab-item v-for="tab in tabs" :key="tab.id" :to="tab.route">
<router-view />
</v-tab-item>
</v-tabs-items>
</v-tabs>
</template>
Script
脚本
export default {
data: () => ({
activeTab: '',
tabs: [
{id: '1', name: 'Tab A', route: 'component-a'},
{id: '2', name: 'Tab B', route: 'component-b'}
]
}),
methods: {
updateRouter(val){
this.$router.push(val)
}
}
}
Router
路由器
Set up as in previous answers.
按照之前的答案进行设置。
回答by Atchutha rama reddy Karri
The following code works for me
以下代码对我有用
<v-tabs fixed-tabs>
<v-tab>Locations</v-tab>
<v-tab>Employees</v-tab>
<v-tab-item>Tab 1 content
<locations-data/>
</v-tab-item>
<v-tab-item>Tab 2 content
<employees-data/>
</v-tab-item>
</v-tabs>
<script>
import LocationsData from './Settings/Locations';
import EmployeesData from './Settings/Employees';
export default {
components: {
LocationsData,
EmployeesData
},
}
</script>
回答by B Ii
//urls in some componet
<v-btn @click="goToUrl({name: 'RouteName1'})">
.....
<v-list-item-title
@click="goToUrl({name: 'RouteName2'})"
>
Some tab link text
</v-list-item-title>
....
//tabs menu and content in other component
<v-tabs>
<v-tab key="key_name1" :to="{ name: 'RouteName1'}">Some link 1</v-tab>
<v-tab key="key_name2" :to="{ name: 'RouteName2'}">Some link 2</v-tab>
<v-tab-item key="key_name1" value="/url/for/route1">
....
<v-tab-item key="key_name2" value="/url/for/route2">
....
