首页 文章

如何在Vue-router中使用Vuetify选项卡

提问于
浏览 次
13

我有以下jsfiddle，它有两个Vuetify标签 . 该文档未显示有关使用 vue-router 的示例 .

我找到了Medium.com post关于如何使用Vuetify和 vue-router ，其中包含以下代码：

<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中指定 router prop，因此帖子中的嵌入示例不起作用 .

我还发现这个StackOverflow answer有以下代码：

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

但是，使用 to 道具并未在Vuetify api中列出't work and it' . 相比之下， v-button Vuetify组件列出 to 道具并使用 vue-router ，所以我希望 vue-router 支持的组件支持 to 道具 .

在旧的old Vuetify 0.17 docs中挖掘， to prop被指定为 v-tabs-item . 看来支持可能已在1.0.13中删除 .

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

javascript vue.js vuejs2 vuetify.js

2 回答

  • 11

    更新

    圣哇！我让Vuetify社区为他们的api添加文档，看起来他们只是将 to 道具以及其他 vue-router 道具添加到了Vuetify tabs docs . 说真的，社区很棒 .

    原始答案

    Vuetify社区Discord的人们能够帮助我 . 我更新的jsfiddle现在有了工作代码 .

    基本上， v-tab 是 router-link 的包装器，我假设它使用槽将道具传递给 router-link ，所以将 to 道具放在 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>

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

    结果

    Foo tab example

    Bar tab example

    回复于
  • 3

    I'm just adding some animation-related tips here & clarifying the use of v-tab-items vs v-tab-item.

    如果您注意到，使用如下工作标记可以防止v-tabs选项卡切换动画工作：

    <v-tabs v-model="activeTab">
  <v-tab key="tab-1" to="/tab-url-1">tab 1</v-tab>
  <v-tab key="tab-2" to="/tab-url-2">tab 2</v-tab>
</v-tabs>
<router-view />

    如果要保留制表符切换动画，这是一种方法 .

    <v-tabs v-model="activeTab">
  <v-tab key="tab-1" to="/tab-url-1" ripple>
    tab 1
  </v-tab>
  <v-tab key="tab-2" to="/tab-url-2" ripple>
    tab 2
  </v-tab>

  <v-tab-item id="/tab-url-1">
    <router-view v-if="activeTab === '/tab-url-1'" />
  </v-tab-item>
  <v-tab-item id="/tab-url-2">
    <router-view v-if="activeTab === '/tab-url-2'" />
  </v-tab-item>
</v-tabs>

    请注意，只要在v-tab-items的id属性中找到了to值，就可以在v-tab和v-tab-item标记上使用v-for循环 . 如果您需要将标签内容放在与标签按钮不同的位置，则这是v-tab-items的用途 . 您可以将v-tab-items放在v-tabs组件外部的v-tab-items标记中 . 确保给它一个v-model =“activeTab”属性 .

    回复于

相关问题