时间戳

首页 > 解决方案 > 如何以编程方式更改 Vuetify 选项卡和 vue-router

vue.js - 如何以编程方式更改 Vuetify 选项卡和 vue-router

问题描述

如何与 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>

标签： vue.jsroutestabs

解决方案

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

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

关键在于您链接的问题v-tab：是router-link. 将replace道具添加到路由器链接告诉它调用router.replace()而不是router.push()（来自API 参考）。

推荐阅读