Vue implementiert 3 Möglichkeiten zum Wechseln zwischen Registerkarten und zum Beibehalten des Datenstatus

3 Möglichkeiten zum Implementieren des Tab-Wechsels in Vue

1. v-show steuert den Inhaltswechsel

1. Prinzip der einfachen Version: Verwenden Sie das Klickereignis, um den Num-Wert als Schalter zu ändern und so den Registerkartenstil sowie die Anzeige und Ausblendung von Inhalten zu steuern.

2. Prinzip der Datenwiedergabe: Verwenden Sie zur Steuerung hauptsächlich den durch v-for gebundenen Index, der dem oben genannten ähnelt.

2. Komponentenwechsel.

1. Die wichtigsten Wissenspunkte sind die Eigenschaften von is in vue und Keep-Alive-Cache

3. Routenwechsel. (Benutzerfreundlich für Adressleiste und Datenanforderung)

Dies wird über eine Router-Verbindung erreicht.

Der Vue-Tab-Schalter behält den Datenstatus bei

Beim Wechseln der Registerkarten auf einer Seite wird die Komponente bei jedem Wechsel neu instanziiert. Daher möchten wir, dass der Inhalt der Registerkarte unabhängig vom Seitenwechsel unverändert bleibt. So werden erneutes Rendern der Seite und mehr Anforderungen reduziert.

Implementierungsmethode: Verwenden Sie <keep-alive></keep-alive>, um die Komponente zu umschließen

<el-tabs v-model="aktiverName" @tab-click="handleClick">
  <el-tab-pane label="Aufzeichnen">
    <am Leben erhalten>
      <child1 v-if="isChildUpdate"></child1>
    </am Leben erhalten>
  </el-tab-pane>
</el-tabs>

Springen Sie zu Details auf der Listenseite und behalten Sie den letzten Vorgangsstatus auf der Listenseite bei

Dies wird erreicht, indem die Router-Ansicht geladen und die Routing-Metaseite im Cache gespeichert wird.

Wenn die Router-Ansicht in mehreren Ebenen verschachtelt ist, müssen Sie möglicherweise mehrere Ebenen einrichten und dann beforeRouteLeave verwenden, um auf das Verlassen der Route zu hören und festzulegen, ob zwischengespeichert werden soll

// Für das Springen von anderen Seiten ist kein Zwischenspeichern von Seiten erforderlich. Für die Rückkehr von der Detailseite ist ein Zwischenspeichern erforderlich.

Zusammenfassen

Damit ist dieser Artikel über 3 Möglichkeiten zum Implementieren des Tab-Umschaltens in Vue und zum Beibehalten des Datenstatus während des Umschaltens abgeschlossen. Weitere Informationen zu Vue-Tab-Umschaltmethoden finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!