链接到Vuetify.js中的特定选项卡

I would like to present to you a quick tip about working with the tabs component in Vuetify.js. I sometimes need to navigate to a specific tab in the application or want to share a direct tab link with a collaborator.

我想向您介绍有关使用Vuetify.js中的tabs组件的快速提示。 有时我需要导航到应用程序中的特定选项卡，或者想与协作者共享直接的选项卡链接。

In order to achieve this, we need to store the information about the current tab in the URL in the browser address bar. A canonical solution involves using nested routes, but sometimes it’s an overkill to create a separate child page for each tab. Thankfully there’s a simpler approach that I quite often end up using.

为了实现这一点，我们需要将有关当前选项卡的信息存储在浏览器地址栏中的URL中。 一个规范的解决方案涉及使用嵌套路由 ，但是有时为每个选项卡创建单独的子页面是一个过大的选择。 值得庆幸的是，我经常使用一种更简单的方法。

TL; DR-直接进入最终代码 (TL;DR — go straight to the final code)

简单标签 (Simple Tabs)

First let’s look at a simple tabs component example:

首先，让我们看一个简单的tabs组件示例：

<template>
...
<v-card>
  <v-tabs v-model="tab" background-color="grey lighten-4">
    <v-tab>
      One
    </v-tab>
    <v-tab>
      Two
    </v-tab>
  </v-tabs>  <v-tabs-items :value="tab">
    <v-tab-item>
      <v-card-text>
        This is ONE!<br>1111111111
      </v-card-text>
    </v-tab-item>
    <v-tab-item>
      <v-card-text>
        This is TWO!<br>2222222222
      </v-card-text>
    </v-tab-item>
  </v-tabs-items>
</v-card>
...
</template><script>
export default {
  data: () => ({
    tab: null
  })
}
</script>

Note that we could also mix tabs with tab items in <v-tabs> component for simplicity, but I prefer to separate tabs from tab items for flexibility.

请注意，为简单起见，我们还可以在<v-tabs>组件中将选项卡与选项卡项混合使用，但是为了灵活性，我更喜欢将选项卡与选项卡项分开。

With the above code, the current tab is stored in the tab variable as an ordinal number. The problem with using this number to identify a tab is that the order of tabs can change if we add any new ones in the future.

使用上面的代码，当前选项tab作为序号存储在tab变量中。 使用此数字标识标签的问题在于，如果将来添加任何新标签，则标签的顺序可能会更改。

命名标签 (Named Tabs)

Instead of distinguishing tabs by their number, we can use a descriptive name. To achieve this we need to specify a href attribute on the tab and a value attribute on the tab item:

除了使用标签的编号来区分标签以外，我们可以使用描述性名称。 为此，我们需要在选项卡上指定href属性，在选项卡项上指定value属性：

<v-card>
  <v-tabs v-model="tab" background-color="grey lighten-4">
    <v-tab href="#one">
      One
    </v-tab>
    <v-tab href="#two">
      Two
    </v-tab>
  </v-tabs>  <v-tabs-items :value="tab">
    <v-tab-item value="one">
      <v-card-text>
        This is ONE!<br>1111111111
      </v-card-text>
    </v-tab-item>
    <v-tab-item value="two">
      <v-card-text>
        This is TWO!<br>2222222222
      </v-card-text>
    </v-tab-item>
  </v-tabs-items>
</v-card>

Note that we need to prepend the tab name with a hash symbol in the href attribute (e.g. href="#one"), but not in the value attribute.

请注意，我们需要在标签名称的href属性(例如href="#one" )之前加一个哈希符号，但在value属性中不使用。

在URL中存储当前选项卡 (Storing the Current Tab in the URL)

In order to store the current tab in the URL, we will use a computed tab property with a setter. Let’s replace our data with:

为了将当前选项卡存储在URL中 ，我们将使用带有setter的计算选项卡属性 。 让我们将data替换为：

computed: {
  tab: {
    set (tab) {
      this.$router.replace({ query: { ...this.$route.query, tab } })
    },
    get () {
      return this.$route.query.tab
    }
  }
}

Note that we are calling $router.replace() instead of $router.push() to avoid storing a visited tab in navigation history and to preserve the back-button functionality.

请注意，我们调用$router.replace()而不是$router.push()来避免在导航历史记录中存储访问过的标签，并保留后退按钮的功能。

Now, when we visit the page for the first time, the URL will include the current tab as a query parameter. It will also update this parameter automatically every time we switch the tab.

现在，当我们第一次访问该页面时，URL将包括当前选项卡作为查询参数。 每当我们切换标签时，它也会自动更新此参数。

One last thing — a button linking to a specific tab will simply look as follows:

最后一件事-链接到特定选项卡的按钮将如下所示：

<v-btn to="/page?tab=one">
  Tab One
</v-btn>

Note that the button destination can be written as: :to="{ path: '/', query: { tab: 'two' } }" if you prefer the object syntax. The same will also work for router links.

请注意，如果希望使用对象语法，则可以将按钮目标写为：： :to="{ path: '/', query: { tab: 'two' } }" 。 路由器链接也一样。

And that’s it — a simple way of tab tracking in the URL. We will explore the more complex solution involving nested routes (aka child pages) in a follow-up article.

就是这样-URL中选项卡跟踪的简单方法。 我们将在后续文章中探讨涉及嵌套路由(又称子页面)的更复杂的解决方案。

You can find a complete working code example for this article in this repository:

您可以在此存储库中找到本文的完整工作代码示例：

About us: Untitled Factory Studio is a boutique web agency based in Montmartre, Paris, France. Give us a shout to chat about your next webapp, PWA or website.

关于我们： Untitled Factory Studio 是一家精品网络代理商，总部位于法国巴黎蒙马特。 给我们留言，聊聊您的下一个Web应用程序，PWA或网站。

翻译自: https://medium.com/untitled-factory/linking-to-a-specific-tab-in-vuetify-js-d978525f2e1a