Vue.js 如何以编程方式与vue路由器一起更改Vuetify选项卡

如何与vue路由器一起更改Vuetify选项卡

我使用vuetify选项卡和路由器，请参见示例

在此示例中，存在两个子组件Foo和Bar

我想从Foo或Bar组件更改活动选项卡和布线。 这是一个简化的例子。我有标准的Vue结构（main.js、App.Vue、Foo.Vue、Bar.Vue）

我只能通过此更改路由器。$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,
});

const Foo={
模板：“Foo组件！”
};
常数条={
模板：“条组件！”
};
常数路由=[
{路径：'/foo'，组件：foo}，
{路径：'/bar'，组件：bar}，
];
const router=new VueRouter（{routes}）；
新Vue({
el:“#应用程序”，
路由器，
});

HTML

福
酒吧

将

replace

指令添加到您的v-tab：

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

Foo

---

密钥在您链接的路径中：

v-tab

是

路由器链接的包装。将
replace
prop添加到路由器链接会告诉它调用
router.replace（）
，而不是
router.push（）
（从中）。
很好！它起作用了。但我对滑块有问题。如果通过router.replace（）进行选择，滑块不会暂停所选选项卡。您对此有什么想法吗？如果您有一条路线与另一条路线部分匹配，请尝试将
exact
添加到v-tab。路由
/
部分匹配所有内容，如果没有
exact
Vuetify，它可能会与其他路由匹配，并认为它是活动选项卡
<v-tab to="/foo" replace>Foo</v-tab>