如何根据路由存储选项卡的状态?

Question

是否可以根据我当前所在的路由存储<v-tab>组件的不同状态？我基本上要实现的是，有一个像下面的代码这样的组件，我在几个不同的路由中使用，但让它记住我当前所在的选项卡，具体取决于路由。

<v-layout justify-space-around row>
<v-tab v-for="tab in navbarTabs" :key="tab.id">{{ tab.name }}</v-tab>
</v-layout>
data() {
return {
navbarTabs: [
{
id: 0,
name: "Home"
},
{
id: 1,
name: "Schedule"
},
{
id: 2,
name: "Tech card"
},
{
id: 3,
name: "Specifications"
},
{
id: 4,
name: "Control card"
},
{
id: 5,
name: "Packing"
}
]
}
}

我以前通过拥有一些相同的<v-tab>组件来达到预期的结果，我根据当前的路线有条件地可视化了v-if，但该解决方案似乎有点粗糙且根本不可扩展。 有人可以给我一些关于如何实现这一目标的指示吗？提前感谢！

Answer 1

v-tabs组件有一个value道具，您可以使用它打开具有给定key的选项卡。v-tab组件有一个to道具，您可以使用它来设置选项卡的路由。所以本质上，你可以使用 Vue 路由器参数来选择一个选项卡，你可以使用v-tab的toprop 设置路由。

您可以像这样定义路由以将selectedTab参数传递给组件：

routes: [
{ path: '/tabs/:selectedTab', component: TabsComponent, props: true },
]

您的TabsComponent可能如下所示：

<template>
<v-layout justify-space-around row>
<v-tabs v-model="selectedTab">
<v-tab 
v-for="tab in navbarTabs"
:key="tab.id"
:to=`/tabs/${tab.id}`
>{{ tab.name }}</v-tab>
</v-layout>
</template>
<script>
export default {
props: ['selectedTab'],
}
</script>