Vue.js 如何在 vuerouter 中使用 Vuetify 选项卡

发布于04月09日

我有以下jsfiddle个有两个Vuetify标签.文档中没有显示使用vue-router的示例.

我找到了关于如何使用Vuetify with vue-router的Medium.com post，它有以下代码:

<div id="app">
  <v-tabs grow light>
    <v-tabs-bar>
      <v-tabs-item href="/" router>
        <v-icon>motorcycle</v-icon>
      </v-tabs-item>
      <v-tabs-item href="/dog" router>
        <v-icon>pets</v-icon>
      </v-tabs-item>
    </v-tabs-bar>
  </v-tabs>

  <router-view />
</div>

然而，代码现在已经过时了，因为Vuetify 1.0.13 Tabs documentation没有在api中指定routerprops ，所以文章中嵌入的示例不起作用.

我还找到了这StackOverflow answer，它的代码如下:

<v-tabs-item :to="{path:'/path/to/somewhere'}">

然而，使用toprops 不起作用，而且它也没有在Vuetify api中列出.相比之下，v-button Vuetify组件确实列出了一个toprops ，并使用了vue-router，所以我希望支持vue-router的组件能够支持toprops .

在旧的old Vuetify 0.17 docs中挖掘，toprops 被指定用于v-tabs-item.似乎在1.0.13中可能已经删除了支持.

如何在Vuetify选项卡上使用vue-router？

原始答案

Vuetify社区discord组织的人帮了我的忙.我更新的jsfiddle现在有了工作代码.

基本上，v-tab是router-link的包装器，我假设它使用插槽将props 传递到router-link，所以将toprops 放在v-tab上就可以了.

以下代码是工作代码的示例:

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>

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, });

后果

Vue.js 如何在 vuerouter 中使用 Vuetify 选项卡

推荐答案

使现代化

原始答案

html

js

后果

Vue.js相关问答推荐

为什么发送 POST API 请求时主体对象没有react ？

保持页面重新加载之间的状态

如何在vue js模板中添加foreach和for循环

使用 cypress 进行 e2e 测试的 vuejs 期间出现 Webpack 错误

Vue index.html favicon 问题

如何在 vue.js 中删除类

未捕获的类型错误：无法读取未定义的属性initializeApp

VueJS：向左，元素的顶部位置？

在组件的样式部分使用 Vue 变量

Vuetify 输入自动完成错误

如何克隆props对象并使其无react

我可以使用react路由创建别名路由吗？

错误：Node Sass 尚不支持您当前的环境：Linux 64-bit with Unsupported runtime (88)

Vue JS 在渲染前等待数据

Vue cli 在 css 中构建生产更改不透明度

如何让 vuetify 数据表在卡片内时跨越容器的整个宽度？

Vue路由在新页面上回到顶部

Vue.js 中的条件依赖于props值？

Vuex 模块Mutations

如何修复套接字 io 中的 400 错误错误请求？