如何根据 url 将 Vuetify 选项卡设置为活动状态答案

【问题标题】：How to set Vuetify tabs to active based on url如何根据 url 将 Vuetify 选项卡设置为活动状态
【发布时间】：2020-05-21 02:52:07
【问题描述】：

我正在使用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() 的位置，它会返回不同的值。在 <template> 它返回完整的 URL，在 <script> 它只返回 Laravel 路由名称。问题是即使密钥和route().current() 匹配，相应的选项卡仍然没有设置为活动状态。

看过Vuetify: How to preselect active tab?，但没有一个答案有效。

更新

再看一遍后发现active_tab: `${route().current()}`, 总是设置为错误的URL。例如，当在 invoices 路由上时，它仍然返回项目的 url。所以和ziggy有关。

【问题讨论】：

您是否尝试过为active_tab 使用计算属性？
@IVOGELOV 试过了，但也没有用。但与直接设置或在mounted() 期间设置相比，它会增加什么？
@IVOGELOV 更新了问题的更多细节
你可以尝试使用Vue-router - 它应该比ziggy更健壮
@IVOGELOV 我正在使用 Ziggy，因为我还使用了让安全性变得更加容易的 interiajs。

标签： vue.js vuejs2 vuetify.js vuetify-tabs

【解决方案1】：

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

【讨论】：

【解决方案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 设置为某个返回选项卡ID 的计算属性（本例中为tab1）
在每个选项卡上设置 :to 以在单击时重定向
在<v-tabs-items> 上设置v-model 以指向<v-tabs> 上的相同:value
在<v-tab-item> 上将value 设置为每个标签ID（本例中为tab1）

【讨论】：