Linking to a Specific Tab in Vuetify.js

Store the current tab in the URL, to navigate to it from anywhere else in the app

Photo by Chiara F on Unsplash

TL;DR — go straight to the final code

Simple 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>

Named Tabs

<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>

Storing the Current Tab in the URL

computed: {
tab: {
set (tab) {
this.$router.replace({ query: { ...this.$route.query, tab } })
},
get () {
return this.$route.query.tab
}
}
}
<v-btn to="/page?tab=one">
Tab One
</v-btn>

Full-Stack Developer / Agilist / Free and Open Source Software Fan.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store