如何以編程方式更改Vuetify選項卡和vue-router

Question

如何與vue-router一起更改Vuetify選項卡

我使用vuetify標簽和路由器，例如。 如何在vue-router中使用Vuetify選項卡

在此示例中，存在兩個子組件Foo和Bar。

我想從Foo或Bar組件更改活動的制表符和路由。 這是簡化的示例。 我有標准的Vue結構（main.js，App.vue，Foo.Vue，Bar.vue）

我只能通過this。$ router.replace更改路由器

謝謝。

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>

Answer 1

將replace指令添加到您的v-tab中：

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

關鍵在於您鏈接的問題 ： v-tab是router-link的包裝。 將replace router.replace()添加到router-link會告訴它調用router.replace()而不是router.push() （來自API參考 ）。