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的{{1}}道具来设置路线。

您可以这样定义路径，以将to参数传递给组件：

selectedTab

您的routes: [ { path: '/tabs/:selectedTab', component: TabsComponent, props: true }, ]看起来可能像这样：

TabsComponent

如何根据路线存储标签状态？

1 个答案: