[英]How to use Vuetify tabs with vue-router via router name
In this question there is a great example of a solution . 这个问题有一个很好的解决方案的例子。 But it is not working when I try to use route via name.
但是当我尝试通过名称使用路由时,它不起作用。
I tried something like that: 我尝试过这样的事情:
<v-tabs v-model="active">
<v-tab v-for="tab of tabs" :key="tab.id" :to="{ name: tab.route_name }">
{{ tab.name }}
</v-tab>
<v-tab-item v-for="tab of tabs" :key="tab.id" :value="{ name: tab.route_name }">
<router-view></router-view>
</v-tab-item>
</v-tabs>
data() {
return {
active: '',
tabs: [
{ id: 1, name: "Task", route_name: 'task' },
{ id: 2, name: "Project", route_name: 'project' }
]
};
}
const routes = [
{
path: '/task',
name: 'task',
component: Task
},
{
path: '/project',
name: 'project',
component: Project
},
];
It just breaks, because :value can't be Object. 它只是中断了,因为:value不能是Object。
I create working jsfiddle and breaking version for play. 我创建了工作的jsfiddle和Breaking 版本进行播放。
PS I can't add comments to answers, so I created a new question. PS:我无法在答案中添加评论,所以我创建了一个新问题。
Update: Temporary solution: 更新:临时解决方案:
I use the manual resolve of the router, like: 我使用路由器的手动解析,例如:
<v-tabs v-model="active">
<v-tab v-for="tab of tabs" :key="tab.id" :to="tab.route">
{{ tab.name }}
</v-tab>
<v-tab-item v-for="tab of tabs" :key="tab.id" :value="tab.route">
<router-view></router-view>
</v-tab-item>
</v-tabs>
data: {
active: '',
},
computed: {
tabs() {
return [{
id: 1,
name: "Task",
route: this.routeResolve('task')
},
{
id: 2,
name: "Project",
route: this.routeResolve('project')
}
]
}
},
methods: {
routeResolve(name) {
return this.$router.resolve({
name: name,
}).location.path
},
},
I noticed that the above solutions have one problem. 我注意到上述解决方案存在一个问题。 Next code is loop:
下一个代码是循环:
<v-tab-item v-for="tab of tabs" :key="tab.id" :value="tab.route">
<router-view></router-view>
</v-tab-item>
It is mean, that each router will be duplicated N-time (where N is tabs count). 意思是,每个路由器将重复N次(其中N是制表符计数)。 When I try fix it I found that we can just use next code as solution:
当我尝试修复它时,我发现我们只能使用下一个代码作为解决方案:
<v-tabs v-model="active">
<v-tab v-for="tab of tabs" :key="tab.id" :to="{ name: tab.route_name }">
{{ tab.name }}
</v-tab>
</v-tabs>
<router-view></router-view>
...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.