Mehrere Möglichkeiten zum Wechseln zwischen Vue Tab und Cache-Seiten

1. So wechseln Sie

Durch die Verwendung dynamischer Komponenten kann es meiner Meinung nach jeder verstehen (einige Codes wurden weggelassen).

//Sie können zwischen den beiden Komponenten wechseln, indem Sie auf <button @click="changeView">Ansicht wechseln</button> klicken.
<Komponente: ist = "currentView"></Komponente>

 importiere SeiteA aus "@/views/SeiteA";
importiere SeiteB aus "@/views/pageB";

 berechnet: {
  aktuelleAnsicht(){
      gib dies zurück.viewList[diesen.index];
  }
},
 Methoden: {
  Ansicht ändern() {
    dieser.index=(++dieser.index)%2
  }
}

Hinweis: Dies wird meist für mehrere Untermodule auf einer Seite verwendet. Im Allgemeinen wird das folgende Routing verwendet, wenn häufiger gewechselt wird.

Routing verwenden (hier geht es um die Konfiguration des Routings, daher gehe ich nicht näher darauf ein)

2. Registerkarten dynamisch generieren

Im Allgemeinen ist der vom UI-Framework bereitgestellte Tab-Wechsel wie oben beschrieben, und wir müssen mehrere Tab-Seiten und andere Konfigurationen selbst schreiben. Was aber, wenn wir durch einen Klick auf das Verzeichnis links eine Registerkarte generieren und diese jederzeit schließen können möchten (wie unten gezeigt)?

Geben Sie der Route einfach ein Klickereignis, speichern Sie Ihre Routenadresse in einer Liste und rendern Sie sie in einem anderen flachen Tab-Verzeichnis.

Angenommen, Ihr Layout sieht so aus: mit einem Verzeichnis auf der linken Seite, einer Registerkarte oben und Seiten mit Wörtern

<Menü>
  <menu-item v-for="(item,index) in menuList" :key="index" @click="addToTabList(item.path)">
    <router-link :to="item.path">{{item.name}}</router-link>
  <Menüelement>
</Menü>

<Vorlage>
  <menu class="left"/>//Menücodeteil wie oben <div class="right">
    <Tabulatorliste>
      <tab-item v-for="(Element, Index) in Tabliste" :Schlüssel="Index">
        <router-link :to="item.path">{{item.name}}</router-link>
        <icon class="löschen" @click="deleteTab"></icon>
      </tab-item>
    </tab-list>
    <Seitenansicht>
      <router-view></router-view>//Hier ist die Seitenanzeige </page-view>
  </div>
</Vorlage>

Der obige Code ist nicht der eigentliche Code, er vermittelt nur einen groben Eindruck. Was das Hinzufügen zu TabList und Löschen von Tabs betrifft, handelt es sich lediglich um eine einfache Push- und Splice-Operation der Array-Methode. Um einen ansprechenden Effekt zu erzielen, benötigen wir möglicherweise auch einige aktive Stile für die Registerkarten, die hier nicht gezeigt werden.

3. Cache-Komponente

Das einfache Wechseln zwischen Tabs reicht bei weitem nicht aus. Schließlich möchte jeder zwischen Tabs hin- und herwechseln. Wir müssen den Fortschritt seiner Vorgänge in verschiedenen Tabs speichern, z. B. ausgefüllte Formularinformationen oder eine Liste abgefragter Daten.
Wie können wir also Komponenten zwischenspeichern?
Sie müssen nur die Keep-Alive-Komponente in Vue verwenden

3.1 Am Leben bleiben

• <keep-alive> ist eine integrierte Komponente von Vue, die den Status während des Komponentenwechsels im Speicher behalten kann, um wiederholtes Rendern von DOM zu verhindern.
• <keep-alive> Beim Umschließen einer dynamischen Komponente werden inaktive Komponenteninstanzen zwischengespeichert, anstatt zerstört zu werden.
• <keep-alive> ist ähnlich wie <transition>, aber es ist eine abstrakte Komponente. Es wird nicht im DOM-Baum gerendert (weder real noch virtuell) und existiert auch nicht in der übergeordneten Komponentenkette. Beispielsweise werden Sie keep-alive nie in this.$parent finden.

Hinweis: Sie können Keep-Alive nicht zum Zwischenspeichern fester Komponenten verwenden, da dies ungültig ist

//Ungültiges <Keep-Alive>
  <meine-Komponente></meine-Komponente>
</am Leben erhalten>

3.2 Nutzung

3.2.1 Nutzung alter Versionen vor Vue 2.1

<am Leben erhalten>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</am Leben erhalten>
<router-view v-if="!$route.meta.keepAlive"></router-view>

Sie müssen die Metadaten des Routers in den Routing-Informationen festlegen

exportiere standardmäßig einen neuen Router({
  Routen: [
    {
      Pfad: '/a',
      Name: "A",
      Komponente: A,
      Meta: {
        keepAlive: false // Kein Caching erforderlich }
    },
    {
      Pfad: '/b',
      Name: 'B',
      Komponente: B,
      Meta: {
        keepAlive: true // muss zwischengespeichert werden }
    }
  ]
})

3.2.2 Relativ neue und einfache Nutzung

Alle Komponenten/Routen direkt zwischenspeichern

<am Leben erhalten>
    <Router-Ansicht/>
</am Leben erhalten>
<am Leben erhalten>
   <Komponente: ist = "Ansicht"></Komponente>
</am Leben erhalten>

Verwenden Sie „Include“, um Komponenten/Routen zu handhaben, die zwischengespeichert werden müssen
Es gibt mehrere Möglichkeiten, include zu verwenden. Es kann ein Array, eine durch Satzzeichen getrennte Zeichenfolge oder ein regulärer Ausdruck sein. Wenn Sie einen regulären Ausdruck verwenden, müssen Sie v-bind verwenden, um ihn zu binden.

<keep-alive include="['a','b']">//Cache-Komponenten mit den Namen a, b<keep-alive include ="a,b">//Cache-Komponenten mit den Namen a, b<keep-alive :include="/^store/">//Cache-Komponenten, deren Name mit Store beginnt <router-view/>//Kann Router-View sein
    <component :is="view"></component>//Kann auch eine dynamische Komponente sein</keep-alive>

Die Verwendung von „exclude“ zum Ausschließen von Routen, die nicht zwischengespeichert werden müssen, ist das Gegenteil von „include“. Komponenten in „exclude“ werden nicht zwischengespeichert. Die Verwendung ist ähnlich, daher werde ich hier nicht ins Detail gehen.

3.2.3 Eine ziemlich seltsame Situation: Es gibt zwei Methoden zum Seitensprung, A->C und B->C. Wenn wir aber von A nach C springen, müssen wir nicht zwischenspeichern, wenn wir aber von B nach C springen, müssen wir zwischenspeichern. Diesmal müssen wir den Routing-Hook in Kombination mit der alten Version verwenden, um dies zu erreichen.

Standard exportieren {
  Daten() {
    zurückkehren {};
  },
  Methoden: {},
  vorRouteAbfahren(nach, von, weiter) {
    to.meta.keepAlive = false; // Nächste Seite nicht zwischenspeichern next();
  }
};

Standard exportieren {
  Daten() {
    zurückkehren {};
  },
  Methoden: {},
  vorRouteAbfahren(nach, von, weiter) {
    //Setze die Metadaten der nächsten Route
    to.meta.keepAlive = true; //Nächste Seite im Cache speichern next();
  }
};

3.3 Lebenszyklusfunktion der Cache-Komponente

Wenn eine Cache-Komponente zum ersten Mal geöffnet wird, muss sie wie eine normale Komponente auch Funktionen wie „Erstellen“ und „Mounten“ ausführen.
Beim Aktivieren und erneuten Deaktivieren werden die Lebenszyklusfunktionen dieser gemeinsamen Komponenten jedoch nicht ausgeführt und es werden zwei weitere einzigartige Lebenszyklusfunktionen ausgeführt.

• aktiviert
  

Dies wird aufgerufen, wenn die zwischengespeicherte Komponente reaktiviert wird.

• deaktiv
  

Dies wird aufgerufen, wenn die zwischengespeicherte Komponente deaktiviert wird.

Oben sind Einzelheiten zu mehreren Möglichkeiten zum Wechseln zwischen Vue-Tabs und zum Verarbeiten zwischengespeicherter Seiten aufgeführt. Weitere Informationen zum Wechseln zwischen Vue-Tabs und zum Verarbeiten zwischengespeicherter Seiten finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!