Vue.js 如何通过路由器名称在vue路由器上使用Vuetify选项卡

这是一个很好的例子。但当我尝试使用route via 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>

它只是中断，因为：值不能是对象

我为游戏而创作

另外，我不能在答案中添加注释，所以我创建了一个新问题

更新：临时解决方案：

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

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

---

我注意到上述解决方案有一个问题。下一个代码是循环：

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

...

{{tab.name}
...

---

值用于控制可见性。我不明白你为什么要用it@MatheusValenza你有没有想法，如何使用路由器fot标签没有：价值？

  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>

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

...