带有路由器的可滑动Vuetify选项卡

Question

在我的Vue应用中，我有一个包含一些标签的页面。我想根据不同的路线更改/显示标签。

为此，我以answer作为参考。

一般来说，这很好！我什至可以通过在移动设备上滑动来更改选项卡（由于[C​​0]上的@change侦听器。

但是：单击选项卡标签时，v-tabs-items加载的组件将被安装两次。滑动时，它只会安装一次。

原因必须将<router-view>置于<router-view> s循环内。

如果将其放置在此循环之外，则子组件将正确安装一次。不幸的是，由于内容已分离，因此我无法再使用滑动来更改标签。

So：是否有机会同时具有这两种功能（动态路由内容和可滑动性）？

谢谢你们！

---

Vue：

<v-tab-item>

路由器：

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

Answer 1

这种行为可以描述事物停顿的顺序吗？ @change更新activeTab之后的路由，单击选项卡更新路由，然后单击activeTab？因此，路由器视图在选项卡视图更新之前位于下一个视图，因此它显示了两个不同的路由器视图。

要解决此问题，请更改

{
    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")
      }
    ]
  }

to

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

或

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