Details zum Vue Page Stack Manager

A vue page stack manager Vue vue-page-stack

Das Beispiel zeigt die allgemeinen Szenarien „Vorwärts“, „Rückwärts“ (aktiviert) und „Ersetzen“ und zeigt auch, dass dieselbe Route mehrere Ebenen haben kann (geben Sie die erforderlichen Informationen ein).

Die aktuelle Version wurde nicht für den allgemeinen geschäftlichen Einsatz getestet. Personen mit den gleichen Anforderungen können sie gerne ausprobieren.

Vorschau

1. Bedarfsanalyse

Da Vue häufig in web App , offiziellen Konten und der nativen Hybrid verwendet wird, kommt es natürlicherweise zu Problemen mit Seitensprüngen und Rollbacks.

Beispielszenario:

• Rufen Sie die Detailseite von der Listenseite aus auf und gehen Sie dann zurück
• Auf der nächsten Seite B muss eine bestimmte Operation auf Seite A ausgewählt werden, und nach der Auswahl muss zu Seite A zurückgekehrt werden (Seite A muss auch wissen, was ausgewählt wurde).
• Rufen Sie die Anmeldeseite von einer beliebigen Seite aus auf, kehren Sie nach erfolgreicher Anmeldung oder Registrierung zur ursprünglichen Seite zurück und stellen Sie sicher, dass Sie nicht zur Anmeldeseite zurückkehren, wenn Sie weiterhin zurückkehren.
• Unterstützt Browser- back und forward (sehr nützlich für WeChat oder Miniprogramme)
• Fügen Sie beim Aufrufen, Verlassen oder bei bestimmten Spezialseiten einige Animationen hinzu, z. B. durch Nachahmen der Standardanimation von ios (Beim Aufrufen wird die Seite von rechts nach links geschwenkt, beim Verlassen wird die Seite von links nach rechts geschwenkt).

2. Bewährte Methoden

Ich habe die folgenden Methoden ausprobiert, aber keine davon hat wie erwartet funktioniert:

2.1 Am Leben bleiben

Im Allgemeinen werden zwei router-view verwendet, um zu steuern, ob die Seite über route und keep-alive zwischengespeichert wird. Dies hat zwei Probleme:

• keep-alive speichert dieselbe Seite nur einmal, sodass es keine zwei Versionen derselben Seite gibt
• Es gibt keine Möglichkeit, transition und andere Animationen zwischen zwei router-view zu verwenden

2.2 CSS mit verschachtelten Routen

Als ich mir die Beispiele von cube-ui ansah, stellte ich fest, dass ihre Beispiele das Problem des Seiten-Cachings zu lösen schienen. Ich habe ihre Verarbeitungsmethode übernommen ( copy ), sie aktualisiert und CSS und verschachtelte route verwendet, um die grundlegenden Anforderungen zu erfüllen.

Es gibt aber auch Nachteile:

• Ich muss meine route streng nach der Seitenhierarchie schreiben
• Viele Seiten müssen an mehreren Stellen verwendet werden, und ich muss die Routen dafür konfigurieren (beispielsweise wird die Produktdetailseite an vielen Stellen Eingänge haben).

3. Funktionsbeschreibung

• Erweitern Sie den Vue-Router, die ursprüngliche Navigationslogik muss nicht geändert werden
• Beim push oder forward wird die Seite neu gerendert und die neu gerenderte Seite zum Stack hinzugefügt.
• Wenn Zurück oder Los (negative Zahl) gedrückt wird, wird die Seite nicht erneut gerendert. Die vorherige Seite wird aus dem Stapel gelesen und der vorherige Inhaltsstatus bleibt erhalten, z. B. Formularinhalt, Position der Bildlaufleiste usw.
• Bei back oder „Gehe“ (negative Zahl) werden nicht verwendete Seiten aus dem Stapel entfernt.
• replace aktualisiert die Seiteninformationen im Stack
• Beim Zurückkehren zur vorherigen Seite wird die activited Hook-Funktion ausgelöst
• Unterstützt Browser-Vorwärts- und Rückwärtsereignisse
• Unterstützt die Reaktion auf Änderungen in Routing-Parametern, wie z. B. die Navigation von /user/foo nach /user/bar , Komponenteninstanzen werden wiederverwendet
• Sie können beim Vorwärts- und Rückwärtsbewegen unterschiedliche Animationen hinzufügen oder auf speziellen Seiten spezielle Animationen einfügen.

4. Installation und Nutzung

Installieren:

npm installiere Vue-Page-Stack
# ODER
Garn fügt Vue-Seitenstapel hinzu

verwenden:

Vue von „vue“ importieren
importiere VuePageStack aus „vue-page-stack“;

// Vue-Router ist erforderlich Vue.use(VuePageStack, { router }); 
// App.vue
<Vorlage>
  <div id="app">
    <vue-Seitenstapel>
      <Router-Ansicht ></Router-Ansicht>
    </vue-page-stack>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "App",
  Daten() {
    zurückkehren {
    };
  },
  Komponenten: {},
  erstellt() {},
  Methoden: {}
};
</Skript>

5. API

5.1 Registrierung

Bei der Registrierung können Sie den Namen und keyName von VuePageStack angeben, was im Allgemeinen nicht erforderlich ist.

Vue.use(VuePageStack, { Router, Name: "VuePageStack", Schlüsselname: "Stack-Schlüssel" });

5.2 Vorwärts und Rückwärts

Wenn Sie beim Vorwärts-, Rückwärts- oder auf einer speziellen Route Animationen hinzufügen möchten, können Sie watch $route auf router-view verwenden und stack-key-dir (benutzerdefinierter keyName ändert sich hier ebenfalls) verwenden, um die Richtung zu diesem Zeitpunkt zu bestimmen. Sie können sich auf das Beispiel beziehen

6. Zugehörige Anweisungen

6.1 Schlüsselname

Warum wird der Parameter keyName zur Route hinzugefügt? Er dient dazu, die Vorwärts- und Rückwärtsereignisse des Browsers zu unterstützen. Diese Funktion ist in öffentlichen WeChat-Konten und Miniprogrammen sehr wichtig.

6.2 Grundsatz

Der Stack zum Abrufen der aktuellen Seite bezieht sich auf keep-alive -Abschnitt.

Dieses Plugin schwirrte mir schon lange im Kopf herum. Ich habe lange Zeit immer wieder daran gearbeitet und es nun endlich fertig gestellt. Ich bin wirklich glücklich.

Die aktuelle Version wurde noch nicht für den allgemeinen Einsatz im Unternehmen getestet. Probieren Sie sie gerne aus, wenn Sie dieselben Anforderungen haben. Wenn Sie Kommentare oder Vorschläge haben, melden Sie issue bitte auf Github . Vielen Dank für Ihre Unterstützung und Ihren Beitrag.

Dieses Plugin greift sowohl auf vue-navigation als auch vue-nav zurück. Ich bin sehr dankbar für ihre Inspiration.

Dies ist das Ende dieses Artikels über die Details von Vue Page Stack Manager. Weitere relevante Inhalte zu Vue Page Stack Manager finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!