如何通过路由器名称将 Vuetify 选项卡与 vue-router 一起使用

Posted 2023-02-22

【中文标题】如何通过路由器名称将 Vuetify 选项卡与 vue-router 一起使用

【英文标题】：How to use Vuetify tabs with vue-router via router name

【发布时间】：2019-08-20 14:22:37

【问题描述】：

在这个question 中有一个很好的例子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-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。

我创建 working jsfiddle 和 breaking version 来玩。

附：我无法将 cmets 添加到答案中，因此我创建了一个新问题。

更新：临时解决方案：

我使用路由器的手动解析，比如：

<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
    ,
  ,

jsfiddle example

【问题讨论】：

值用于控制可见性。我不明白你为什么要使用它

@MatheusValenza 你知道吗，如何在没有 :value 的情况下使用路由器选项卡？

【参考方案1】：

我注意到上述解决方案存在一个问题。接下来的代码是循环：

<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>

...

jsfiddle