라우터가 있는 스위프 가능 Vuetify 탭

라우터가 있는 스위프 가능 Vuetify 탭

내 vue 앱에는 탭이 들어 있는 페이지가 있다.다른 경로를 기준으로 탭을 변경/표시하고 싶다.

이를 위해 나는 이 답을 참고 자료로 삼았다.

일반적으로 이것은 잘 작동한다!모바일 기기에서 탭도 바꿀 수 있다(덕분에).@change청취자:v-tabs-items.

BIT: 탭 레이블을 클릭하면<router-view>두 번 탈 거야미끄러질 때, 그것은 한 번만 장착된다.

명분은 그 사람과 무슨 관계가 있다.<router-view>의 범위 안에 있는<v-tab-item>s

이 루프를 벗어나면 아동 구성 요소가 한 번 올바르게 장착된다.불행히도 나는 더 이상 스와이프를 사용하여 탭을 변경할 수 없다. 내용이 분리되었기 때문이다.

그렇다면, 기능(동적 라우팅 콘텐츠와 스위프 기능)을 모두 가질 수 있는 기회가 있는가?

고마워 얘들아!

---

부에:

<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 update the route post 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" />

나는 제공할 다른 대답을 가지고 있다.@Estradiaz의 대답은 나에게 효과가 없을 것이다. 왜냐하면 나는 내 탭의 일부 안에 자식 뷰를 가지고 있고 그 탭의 첫 번째 자식 뷰로 리디렉션되기 때문이다.결국 나는 많은 사례들을 가지고 있었다.tab.properties가 tab.properties의 경로였기 때문에 tab.properties와 일치하지 않았다.길이 그 탭의 아이들 중 한 명을 가리켰다.

나는 내가 더 낫고 더 일반적으로 적용할 수 있다고 생각하는 대안을 찾았다.하지만 그것에 착수하기 전에, 나는 무슨 일이 일어나고 있는지 충분히 설명하고 싶다.

우리는 의 :to 속성을 사용하고 있기 때문에 라우터가 구성요소의 선택과 표시를 모두 처리하도록 하고 있다.인프라가 대응할 기회가 생기기 전에 경로가 바뀐다는 뜻이다.예를 들어 탭이 2개 있고 탭 1이 표시되면 표시되는 내용은 이 항목(html에서 이 항목을 볼 수 있음)

<v-tabs-items>
  <v-tab-item><router-view>tab 1 component</router-view></v-tab-item>
  <--- tab 2 commented out --->
</v-tabs-items>

그런 다음 탭 2를 클릭하면 다음과 같은 작업이 수행된다.

<v-tabs-items>
  <v-tab-item><router-view>tab 2 component</router-view></v-tab-item>
  <--- tab 2 commented out --->
</v-tabs-items>

그런 다음 시간이 지나면 코드가 업데이트되고 다음 단계로 넘어간다.

<v-tabs-items>
  <--- tab 1 commented out --->
  <v-tab-item><router-view>tab 2 component</router-view></v-tab-item>
</v-tabs-items>

그러나 v-if가 변경되었기 때문에 탭 1의 경우 를 삭제하고 탭 2의 새 구성 요소를 함께 사용하여 탭 2의 새 인스턴스를 생성하도록 할 뿐이다.

인프라에는 표시되는 탭과 의 구성 요소가 일치하지 않는다는 것을 아는 데 사용할 수 있는 것이 없어 보인다.@Estradiaz의 솔루션은 단순한 탭 구성요소에 좋으나 신뢰성이 떨어진다.

불일치 사례를 차단하는 대신, 나는 이 솔루션을 채택하고 유지 기반 인프라를 사용하여 탭 1을 날려버릴 때 "재사용"할 것이다.질문에서 제시된 원래의 마크업(markup)은 다음과 같다.

<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">
        <div v-if="tab.route === activeTab">
          <keep-alive>
            <router-view key="1"  />
          </keep-alive>
        </div>
      </v-tab-item>
    </v-tabs-items>
  </v-tabs>
  <!-- [...] -->
</template>

이제 탭 2를 클릭하면 다음과 같은 일이 발생한다.

<v-tabs-items>
  <v-tab-item><router-view>tab 2 component</router-view></v-tab-item>
  <--- tab 2 commented out --->
</v-tabs-items>

그리고 라우터 뷰는 탭 2 구성요소를 만들고 그것을 표시한다.일부 시간이 경과하고 v-tab 인프라가 업데이트되고 이에 대한 표시가 변경됨:

<v-tabs-items>
  <--- tab 1 commented out --->
  <v-tab-item><router-view>tab 2 component</router-view></v-tab-item>
</v-tabs-items>

하지만 이제 원본이 돔에서 제거되면 삭제되지 않고 캐시된다.그리고 새로운 것이 만들어지면, 그것은 이미 구성된 탭 2 구성요소와 함께 사용할 준비가 된 캐시에서 나온다.

나의 경우, 이것은 일어나고 있는 이중 마운팅을 제거하는데 완벽하게 효과가 있었다.그리고 매번 바꿀 때마다 재현할 필요가 없기 때문에 아마 조금 더 빠를 것이다.

참조URL: https://stackoverflow.com/questions/62276849/swipable-vuetify-tabs-with-router