如何使用 vue-router 一起更改 Vuetify 选项卡
我使用vuetify选项卡和路由器,例如。如何将 Vuetify 选项卡与 vue-router 一起使用
在此示例中存在两个子组件 Foo 和 Bar。
我想从Foo或Bar组件更改活动选项卡和路线。这是简化的示例。我有标准的 Vue 结构(main.js、App.vue、Foo.Vue、Bar.vue(
我只能通过这个更改路由器.$router.替换
谢谢。
.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>
将 replace
指令添加到 v-tab:
<v-tab to="/foo" replace>Foo</v-tab>
关键在于您链接的问题:v-tab
是router-link
的包装器。将replace
道具添加到路由器链路会告诉它调用router.replace()
而不是router.push()
(来自 API 参考(。