Die perfekte Lösung für Vue-Routing-Fallback (vue-route-manager)

Routenplaner

Notieren Sie den Vue-Route-Namen jedes Sprungs und verfügen Sie über integrierte Methoden zur Handhabung von Fallbacks, sodass Sie problemlos auf die angegebene Seite zurückgreifen können.

Hintergrund

In den vom Autor entwickelten Projekten treten häufig verschiedene ausgefallene Sprünge auf. Beispielsweise liegen zwischen der Auswahloperation auf der Anleitungsseite und der endgültigen Übermittlung und Überprüfung unzählige Seiten in der Mitte, und selbst unterschiedliche Operationen in der Mitte führen zu unterschiedlichen endgültigen Rollback-Tiefen.

Angenommen, der Ausgangspunkt des Projekts ist die Auswahlseite. Schließlich erreicht es die Übermittlungsseite und kehrt zur ursprünglichen Seite (Auswahlseite) zurück.

Seite auswählen --> B --> C --> Seite senden
Fall 1: Von der Auswahl bis zur Übermittlung durchlaufen wir B und C. Dieses Mal müssen wir router.go(-3) aufrufen, um zu A zurückzukehren.
----------------------------------------
​
Seite auswählen --> B-1 ------> Seite senden
Im Fall 2 wird von der Auswahl bis zur Übermittlung nur B-1 durchlaufen. Zu diesem Zeitpunkt ist go(-3) nicht mehr anwendbar. Zu diesem Zeitpunkt kann ein Abfrageparameter (Kanal-ID) hinzugefügt werden, um den zweiten Fall zu unterscheiden.
----------------------------------------
​
Seite auswählen --> B-2 --> C-2 --> C-2-1 --> Seite senden
In diesem Fall ist nicht nur go(-3) nicht anwendbar, sondern der Abfrageparameter muss einen zusätzlichen Typ haben. Wenn später weitere Kanäle unterschieden werden müssen, können Sie sich vorstellen ...

Zu diesem Zeitpunkt können Sie das RouteManager-Plugin verwenden, um diese Reihe komplexer Probleme zu bewältigen

Erste Schritte

 npm ich vue-route-manager -S

 Vue von „vue“ importieren
 ​
 // Den Routenmanager importieren importiere VueRouteManager von 'vue-route-manager'
 ​
 // und mounte es auf Vue Vue.use(VueRouteManager, { /* ...ManagerOptions */ })
 ​
 // An dieser Stelle auf der Seite können Sie this.$RouteManager verwenden, um auf den Manager zuzugreifen

ManagerOptions-Parameter

Beispiel

Startseite

Routeninformationen { Pfad: '/home', Name: 'home', Komponente: Home }

 <Vorlage>
  <button @click="jump">Nächste Seite</button>
 </Vorlage>
 <Skript>
 Standard exportieren {
    Methoden: {
       springen(){
          // Notieren Sie den Namen der Homepage
          dies.$RouteManager.setHome('home')
          dies.$router.push({ name: 'page-1' })
      }
    }
 }
 </Skript>

Seite-1 Seite

Routing-Informationen { Pfad: '/Seite_1', Name: 'Seite-1', Komponente: Seite-1 }

 <Vorlage>
  <div Klasse="Seite-1">
  Seite-1
  <button @click="$router.push({ name: 'page-2' })">Nächste Seite</button>
  <button @click="$router.replace({ name: 'page-1' })">Weiterleiten</button>
  </div>
 </Vorlage>

Seite-2

Routeninformationen { Pfad: '/Seite_2', Name: 'Seite-2', Komponente: Seite-2 }

 <Vorlage>
  <div Klasse="Seite-2">
  Seite-2
  <button @click="$router.push({ name: 'page-3' })">Nächste Seite</button>
  <button @click="backToHome">Zurück zur Startseite</button>
  </div>
 </Vorlage>
 <Skript>
 Standard exportieren {
    Methoden: {
       zurückZurStartseite(){
          // Rufen Sie backHome auf, um zur Homepage des ersten Datensatzes zurückzukehren this.$RouteManager.backHome()
      }
    }
 }
 </Skript>

Seite-3 Seiten

Routing-Informationen { Pfad: '/Seite_3', Name: 'Seite-3', Komponente: Seite-3 }

 <Vorlage>
   <div Klasse="Seite-3">
    Seite-3
     <button @click="$backToHome">Zurück zur Startseite</button>
     <button @click="backToPage">Zurück zur Seite-1</button>
   </div>
 </Vorlage>
 Standard exportieren {
    Methoden: {
      zurückZurSeite(){
          // Rufen Sie backByName auf, um zur angegebenen Seite zurückzukehren (Sie müssen diese Seite durchlaufen haben)
          dies.$RouteManager.backByName('Seite-1')
      },
  zurückZurStartseite(){
          // Rufen Sie backHome auf, um zur Homepage des ersten Datensatzes zurückzukehren this.$RouteManager.backHome()
      }
    }
 }
 </Skript>

Lösung des Problems

A --> B --> C --> D -- Zurück -> A // Fall 1
|--> B-1 ------> D --Zurück-> A // Fall 2
|--> B-2 --> C-2 -->C-2-1 --> D --Rückkehr-> A // Fall 3

Rufen Sie zunächst this.$RouteManager.setHome('page-A') oder this.$RouteManager.setHome() auf Seite A auf.

Wenn dann Seite B zurückkehren muss, rufen Sie Folgendes auf: $RouteManager.backHome()

Methoden

setHome([Name])

• Name
  • Typ: Zeichenfolge
  • Name bezieht sich auf den Namen in der Routenliste { Pfad: '/Seite_3', Name: 'Seite-3', Komponente: Seite-3 }
  • Standard: der Name der aktuellen Route

Legen Sie den Seitenroutennamen fest, der letztendlich zurückgegeben werden soll

zurückHome()

Kehren Sie zur Startseite zurück und legen Sie die Startseite über „setHome“ fest.

zurückNachName(Name)

• Name
  • Typ: Zeichenfolge
  • Name bezieht sich auf den Namen in der Routenliste { Pfad: '/Seite_3', Name: 'Seite-3', Komponente: Seite-3 }

Kehren Sie zur Seite mit dem angegebenen Namen zurück

Zusammenfassen

Damit ist dieser Artikel über vue-route-manager, die perfekte Lösung für Vue-Routing-Fallback, abgeschlossen. Weitere relevante Inhalte zum Vue-Routing-Fallback finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!