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

Question

我有以下jsfiddle有两个Vuetify标签。文档没有显示使用type Props<T extends React.Component<any, any>> = T extends React.Component<infer P, any> ? P : never; type State<T extends React.Component<any, any>> = T extends React.Component<any, infer S> ? S : never; function HocThatMagicallyProvidesProperty<T extends {new(...args:any[]): React.Component<any, any>}, TProps = Props<InstanceType<T>>, TState=State<InstanceType<T>>, TNewProps = Pick<TProps, Exclude<keyof TProps, 'world'>>>(constructor: T) : (p: TNewProps) => React.Component<TNewProps, TState> { throw ""; } interface MyProps { hello: string; world: number; } interface MyState { } const MyComponent = HocThatMagicallyProvidesProperty(class extends React.Component<MyProps, MyState> { constructor(props: MyProps, context: any) { super(props, context); } public render() { return <div></div>; } }) function usingThatComponent() { return ( <MyComponent hello="test" /> ); } 的示例。

我发现Medium.com post关于如何将Vuetify与vue-router一起使用，其中包含以下代码：

vue-router

但是，代码现已过时，因为Vuetify 1.0.13 Tabs documentation未在其api中指定<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> 道具，因此帖子中嵌入的示例无效。

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

router

然而，使用<v-tabs-item :to="{path:'/path/to/somewhere'}"> 道具并不起作用，它也没有在Vuetify api中列出。相比之下，to Vuetify组件会列出v-button道具并使用to，因此我希望vue-router支持的组件支持vue-router道具。

在旧版old Vuetify 0.17 docs中挖掘，为to指定to道具。似乎在1.0.13中可能已经删除了支持。

如何将v-tabs-item与Vuetify标签一起使用？

Answer 1

更新

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

原始答案

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

基本上，vue-router是v-tab的包装器，我假设它使用插槽将道具传递给router-link，因此将router-link道具放在to上工作正常。

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

HTML

v-tab

JS

<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>

结果

Answer 2

我只是在此处添加一些与动画有关的技巧，并阐明v-tab-items与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-for属性中找到v-tab值，就可以在v-tab-item和to标签上使用id循环您的v-tab-item个。

     

如果您需要将标签内容放置在与标签按钮不同的位置，这就是v-tab-items的目的。您可以将v-tab-item放在v-tab-items组件之外的v-tabs标记中。确保为它提供一个v-model="activeTab"属性。

Answer 3

2019年使用vuetify 1.5.6

  <div>
    <v-tabs v-model="activeTab" grow>
      <v-tab v-for="tab of tabs" :key="tab.id" :to="tab.route" exact>
        {{ tab.name }}
      </v-tab>

      <v-tab-item v-for="tab of tabs" :key="tab.id" :value="tab.route">
        <router-view></router-view>  
      </v-tab-item>

    </v-tabs>
  </div>

还有js部分：

  data() {
    return {
      activeTab: `/user/${this.id}`,
      tabs: [
        { id: 1, name: "Task", route: `/user/${this.id}` },
        { id: 2, name: "Project", route: `/user/${this.id}/project` }
      ]
    };
  }

路线：

{
  path: "/user/:id",
  component: User1,
  props: true,
  children: [
    {
      path: "", //selected tab by default
      component: TaskTab
    },
    {
      path: "project",
      component: ProjectTab
    }
  ]
}

See codesanbox example

Answer 4

以下代码对我有用

  <v-tabs fixed-tabs>
          <v-tab>Locations</v-tab>
          <v-tab>Employees</v-tab>
          <v-tab-item>Tab 1 content
            <locations-data/>
          </v-tab-item>
          <v-tab-item>Tab 2 content
            <employees-data/>
          </v-tab-item>
    </v-tabs>
   <script>
        import LocationsData from './Settings/Locations';
        import EmployeesData from './Settings/Employees';
        export default {
           components: {
            LocationsData,
            EmployeesData
          },
        }
   </script>

Answer 5

//urls in some componet
<v-btn @click="goToUrl({name: 'RouteName1'})">
    .....
<v-list-item-title 
    @click="goToUrl({name: 'RouteName2'})"
>
    Some tab link text
 </v-list-item-title>
    ....


//tabs menu and content in other component
<v-tabs>
    <v-tab key="key_name1" :to="{ name: 'RouteName1'}">Some link 1</v-tab>
    <v-tab key="key_name2" :to="{ name: 'RouteName2'}">Some link 2</v-tab>

<v-tab-item key="key_name1" value="/url/for/route1">
    ....
<v-tab-item key="key_name2" value="/url/for/route2">
    ....

Answer 6

启用动画和滑动

并保留您现有的查询参数：有用例如如果您的网址中有 :locale：

模板

<v-tabs v-model="activeTab">
   <v-tab v-for="tab in tabs" :key="tab.id" :to="tab.to">
    {{ tab.name }}
  </v-tab>
</v-tabs>

<v-tabs-items v-model="activeTab" @change="updateRouter($event)">
  <v-tab-item v-for="tab in tabs" :key="tab.id" :value="tab.to">
    <router-view />          
  </v-tab-item>
</v-tabs-items>

脚本

export default {
  data: () => ({
    activeTab: '',
  }),
  computed: {
    tabs() {
      return [
        { id: 1, name: 'Tab one', to: this.getTabPath('routeName1') },
        { id: 2, name: 'Tab two', to: this.getTabPath('routeName2') },
        { id: 3, name: 'Tab three', to: this.getTabPath('routeName3') },
        { id: 4, name: 'Tab four', to: this.getTabPath('routeName4') },
      ]
    },
  },
  methods: {
    getTabPath(name) {
      // Get the path without losing params. Usefull e.g. if you have a :locale in your url:
      return this.$router.resolve({ name, params: this.$route.params }).href
    },
    updateRouter(path) {
      // Gets called upon swipe.
      this.$router.push(path)
    },
  },
}

使用 $router.resolve 从路由对象获取路径，如 here 所述。