[英]How to use Vuetify tabs with vue-router via router name
這個問題有一個很好的解決方案的例子。 但是當我嘗試通過名稱使用路由時,它不起作用。
我嘗試過這樣的事情:
<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
},
];
它只是中斷了,因為:value不能是Object。
我創建了工作的jsfiddle和Breaking 版本進行播放。
PS:我無法在答案中添加評論,所以我創建了一個新問題。
更新:臨時解決方案:
我使用路由器的手動解析,例如:
<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
},
},
我注意到上述解決方案存在一個問題。 下一個代碼是循環:
<v-tab-item v-for="tab of tabs" :key="tab.id" :value="tab.route">
<router-view></router-view>
</v-tab-item>
意思是,每個路由器將重復N次(其中N是制表符計數)。 當我嘗試修復它時,我發現我們只能使用下一個代碼作為解決方案:
<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.