如何根据 url 将 Vuetify 选项卡设置为活动

Question

我正在使用 vue 2.6.11、vuetify 2.2.9 和 ziggy 0.8.1。对于 Vuetify 选项卡，我有以下内容：

<template>
    <v-tabs
        background-color="transparent"
        slider-color="secondary"
        icons-and-text
        dark
        :value="`${route().current()}`"
        v-model="active_tab"
    >
        <v-tab
            :href="route('project.projects.show', $page.project.id)"
            link
            exact
            key="project.projects.show"
        >
            Project
        </v-tab>

        <v-tab
            :href="route('project.projects.company', $page.project.id)"
            link
            exact
            key="project.projects.company"
        >
            Company
        </v-tab>

        <v-tab
            :href="route('project.invoices.index', $page.project.id)"
            link
            exact
            key="'project.invoices.index"
        >
            Invoices
        </v-tab>
    </v-tabs>
</template>

<script>
export default {
    data()
    {
        return {
            active_tab: `${route().current()}`,
        }
    },
}
</script>

根据 route().current() 的位置，它 returns 有不同的值。在 <template> 中它 returns 完整的 URL 而在 <script> 中它只是 returns Laravel 路由名称。问题是即使键和 route().current() 匹配，相应的选项卡仍未设置为活动。

已查看，但 none 的答案有效。

更新

仔细查看后发现 active_tab: `${route().current()}`, 总是设置为错误的 URL。例如，当在发票路线上时，它仍然是 returns 项目的 url。所以跟ziggy有关。

Answer 1

看起来在 data 对象中将 v-tabs 的 v-model 属性设置为等于 window.location.href 可以解决问题。

Answer 2

<v-tabs :value="tab_value_in_url">
   <v-tab :to="/pages/tab1">Tab 1</v-tab>
</v-tabs>

<v-tabs-items v-model="tab_value_in_url">
      <v-tab-item value="tab1">...</v-tab-item>
</v-tabs-items>

重要的部分是：

将 <v-tabs> 上的 :value 设置为 returns 选项卡 ID（本例中的 tab1）属性
在每个选项卡上设置 :to 以在单击时重定向
将 <v-tabs-items> 上的 v-model 设置为指向 <v-tabs>

:value

将 <v-tab-item> 上的 value 设置为每个选项卡 ID（本例中为 tab1）

如何根据 url 将 Vuetify 选项卡设置为活动

How to set Vuetify tabs to active based on url

vue.js

vuejs2

vuetify.js

vuetify-tabs