带路由器的可滑动Vutify标签 [英] Swipable Vuetify Tabs with router

问题描述

在我的VUE应用程序中，我有一个包含一些选项卡的页面。 我想根据不同的路线更改/显示选项卡。

为此，我使用了answer作为参考。

总的来说，这工作得很好！我甚至可以通过在移动设备上滑动来更改标签(这要归功于v-tabs-items上的@change侦听器。

但是：单击选项卡标签时，由<router-view>加载的组件将挂载两次。刷卡时只挂载一次。

原因必须与<router-view>在<v-tab-item>的循环内有关。

如果我将其放在此循环之外，子组件将正确安装一次。 不幸的是，我无法再使用Swipe更改选项卡，因为内容是分离的。

SO：是否有可能同时拥有这两种功能(动态路由内容和可刷性)？

谢谢大家！

---

值：

<template>
 <!-- [...] -->
 <v-tabs centered="centered" grow v-model="activeTab">
    <v-tab v-for="tab of tabs" :key="tab.id" :id="tab.id" :to="tab.route" exact>
      <v-icon>{{ tab.icon }}</v-icon>
    </v-tab>

    <v-tabs-items v-model="activeTab" @change="updateRouter($event)">
      <v-tab-item v-for="tab of tabs" :key="tab.id" :value="resolvePath(tab.route)" class="tab_content">
        <!-- prevent loading multiple route-view instances -->
        <router-view v-if="tab.route === activeTab" />
      </v-tab-item>
    </v-tabs-items>
  </v-tabs>
  <!-- [...] -->
</template>

<script lang="ts">
data: () => ({
    activeTab: '',
    tabs: [
      {id: 'profile', icon: 'mdi-account', route: '/social/profile'},
      {id: 'friends', icon: 'mdi-account-group', route: '/social/friends'},
      {id: 'settings', icon: 'mdi-cogs', route: '/social/settings'},
    ]
  }),
  methods: {
    updateRouter(tab:string) {
      this.$router.push(tab)
    }
  },
</script>

路由器：

{
    path: "/social",
    component: () => import("../views/Social.vue"),
    meta: {
      requiresAuth: true
    },
    children: [
      {
        path: "profile",
        component: () => import("@/components/social/Profile.vue")
      },
      {
        path: "friends",
        component: () => import("@/components/social/Friendlist.vue")
      },
      {
        path: "settings",
        component: () => import("@/components/social/ProfileSettings.vue")
      }
    ]
  }

推荐答案

此行为能否描述事物发生的顺序？@Change更新路由后的activeTab，单击该选项卡更新路由，然后单击activeTab？因此，路由器视图在选项卡视图更新之前位于下一个视图上，因此它在同一路径上显示两个不同的路由器视图。

要修复此问题，只需更改

<router-view v-if="tab.route === activeTab" />

至

<router-view v-if="tab.route === $route.fullPath && tab.route === activeTab" />

或

<router-view v-if="tab.route === $route.path && tab.route === activeTab" />

这篇关于带路由器的可滑动Vutify标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！