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

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 Router 参数来选择一个选项卡，你可以使用 v-tab 的 to 属性设置路由。

您可以像这样定义您的路线，将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>