0

How to change Vuetify tabs together with vue-router

I use vuetify tabs and router see eg. How to use Vuetify tabs with vue-router

In this sample exist two child component Foo and Bar.

I would like to change active tab and route from Foo or Bar component . This is simplified example. I have the standard Vue structure (main.js, App.vue, Foo.Vue, Bar.vue)

I can change only router via this.$router.replace

Thanks.

JS

const Foo = {
  template: '<div>Foo component!</div>'
};

const Bar = {
  template: '<div>Bar component!</div>'
};

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar },
];

const router = new VueRouter({ routes });

new Vue({
  el: '#app',
  router,
});

HTML

<v-app dark>
  <v-tabs fixed-tabs>
    <v-tab to="/foo">Foo</v-tab>
    <v-tab to="/bar">Bar</v-tab>
  </v-tabs>
  <router-view></router-view>
</v-app>
Carlos
  • 13
  • 6

1 Answers1

1

Add the replace directive to your v-tab:

<v-tab to="/foo" replace>Foo</v-tab>

The key is in the question you linked:v-tab is a wrapper for router-link. Adding the replace prop to a router-link tells it to call router.replace() instead of router.push() (from the API Reference).

  • Nice! It works. But I have problem with slider. Slider does not fallow the selected tab if selection happened via router.replace(). Have you anyidea about this? – Carlos Jul 17 '19 at 13:49
  • If you have a route that partially matches another route try adding `exact` to the v-tab. The route `/` partially matches everything and without `exact` Vuetify may match it to other routes and think that it's the active tab –  Jul 19 '19 at 02:45