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

Posted

技术标签:

【中文标题】如何以编程方式更改 Vuetify 选项卡和 vue-router【英文标题】:How to change Vuetify tabs together with vue-router programmatically 【发布时间】:2019-11-24 09:11:52 【问题描述】:

如何与 vue-router 一起更改 Vuetify 选项卡

我使用 vuetify 选项卡和路由器,例如。 How to use Vuetify tabs with vue-router

在这个示例中存在两个子组件 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>

【问题讨论】:

【参考方案1】:

replace 指令添加到您的 v-tab:

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

密钥在您链接的question 中:v-tabrouter-link 的包装器。将replace 属性添加到路由器链接告诉它调用router.replace() 而不是router.push()(来自API Reference)。

【讨论】:

不错!有用。但我对滑块有疑问。如果通过 router.replace() 进行选择,则滑块不会关闭所选选项卡。你知道吗? 如果您的路线与另一条路线部分匹配,请尝试将exact 添加到 v-tab。 / 路由部分匹配所有内容,没有 exact Vuetify 可能会将其匹配到其他路由并认为它是活动选项卡

以上是关于如何以编程方式更改 Vuetify 选项卡和 vue-router的主要内容,如果未能解决你的问题,请参考以下文章

iOS 以编程方式转到选项卡和推送视图控制器

寻找嵌入了选项卡和导航控制器的视图控制器

无法在 setTimeout 回调中以编程方式打开 Vuetify 对话框

如何以编程方式更改 Access 中的选项?

UWP TabView 以编程方式更改选项卡

如何以编程方式更改初始标签栏选择