Der Unterschied zwischen Hash-Modus und Verlaufsmodus im Vue-Router

vue-router hat zwei Modi

• Hash-Modus
• Verlaufsmodus
  

1. Einzelseitenanwendung

Einzelseitenanwendung

1. Es gibt nur eine HTML-Datei. Der gesamte Inhalt der gesamten Website befindet sich in diesem HTML und wird von JS verarbeitet.

2. Es erfolgt nicht nur keine Aktualisierung bei der Seiteninteraktion, sondern auch Seitensprünge werden nicht aktualisiert. So erreichen Sie eine Single-Page-Anwendung: Trennung von Front-End und Back-End + Front-End-Routing. (Ansicht aktualisieren, ohne die Seite erneut anzufordern)

Front-End-Routing

Die Implementierung ist eigentlich sehr einfach. Dabei werden unterschiedliche URL-Pfade abgeglichen, analysiert, unterschiedliche Komponenten geladen und anschließend der regionale HTML-Inhalt dynamisch gerendert.

Vorteil

Gute interaktive Erfahrung, Benutzer müssen die Seite nicht aktualisieren, die Seite wird reibungslos angezeigt, guter Arbeitstrennungsmodus für Front-End und Back-End, reduziert den Serverdruck,

Mangel

Nicht gut für SEO, das anfängliche Laden dauert lange

2. Hash-Modus

Prinzip: Es handelt sich um das Onhashchange-Ereignis, das auf dem Fensterobjekt abgehört werden kann

Der Standardmodus des Vue-Routers ist der Hash-Modus

1. Verwenden Sie den URL-Hash, um eine vollständige URL zu simulieren

2. Wenn sich die URL ändert, wird die Seite nicht neu geladen, d. h. eine Einzelseitenanwendung

2. Wenn sich der Hash nach # ändert, sendet der Browser keine Anfrage an den Server. Wenn der Browser keine Anfrage sendet, wird die Seite nicht aktualisiert und das Ereignis hasChange wird ausgelöst. Durch die Überwachung der Änderungen im Hashwert kann der Vorgang zum Aktualisieren eines Teils des Seiteninhalts realisiert werden.

window.onhashchange = Funktion(Ereignis){
    console.log(Ereignis.alteURL, Ereignis.neueURL);
    Lassen Sie hash = location.hash.slice(1);
    Dokument.Body.Style.Color = Hash;
}

Für den Hash-Modus wird ein hashHistory-Objekt erstellt. Beim Zugriff auf verschiedene Routen passieren zwei Dinge:

1. HashHistory.push() fügt die neue Route oben im Zugriffsverlaufsstapel des Browsers hinzu.

2. HasHistory.replace() ersetzt die Route oben im aktuellen Stapel

3.Verlaufsmodus

Mit dem Aufkommen der History-API hat sich das Front-End-Routing weiterentwickelt. Beim vorherigen Hashchange konnten Sie nur das URL-Fragment nach # ändern, während die History-API dem Front-End völlige Freiheit bietet.

• Die History-API kann in zwei Teile unterteilt werden: Umschalten und Ändern
  

3.1 Status der Schalthistorie

Dazu gehören die drei Methoden Zurück, Vorwärts und Gehen, die den Vorwärts-, Rückwärts- und Sprungoperationen des Browsers entsprechen. Beispiel: Der (Google-)Browser hat nur Vorwärts- und Rückwärtsfunktionen, keine Sprungfunktionen. Wenn Sie die Vorwärts- und Rückwärtstasten lange drücken, wird der Verlauf aller aktuellen Fenster angezeigt, sodass Sie springen können (vielleicht ist es angemessener, es Sprungfunktionen zu nennen):

history.go(-2);//Zweimal zurückhistory.go(2);//Zweimal vorwärtshistory.back(); //Zurückhistory.forward(); //Vorwärts

3.2 Ändern des Verlaufsstatus

Enthält zwei Methoden: pushState und replaceState

Diese beiden Methoden erhalten drei Parameter: stateObj, title, url

Verlauf.pushState({Farbe:'red'}, 'red', 'red'})

window.onpopstate = Funktion(Ereignis){
    konsole.log(ereignis.status)
    wenn(Ereignis.Zustand &&Ereignis.Zustand.Farbe === 'rot'){
        Dokument.Body.Style.Color = "rot";
    }
}

Geschichte.zurück();

Geschichte.vorwärts();

Schritt

1. Speichern Sie den Status der Seite im Statusobjekt über Pushstate

2. Wenn die Seiten-URL wieder zu dieser URL wechselt, können Sie das Statusobjekt über event.state abrufen

3. Damit der Seitenstatus wiederhergestellt werden kann

4. Der Seitenstatus ist hier die Schriftfarbe der Seite. Tatsächlich können der Seitenstatus der Bildlaufleistenposition, des Lesefortschritts und der Komponentenwechsel alle im Status gespeichert werden.

3.3 Wovor hat der Verlaufsmodus Angst?

Der Unterschied zwischen Hash und Verlauf

Verlaufsmodus

1. Durch die History-API werden wir das hässliche # los, aber es hat auch ein Problem

2. Haben Sie keine Angst vor Vorwärts- oder Rückwärtsbewegungen, haben Sie nur Angst vor der Aktualisierung, f5

——Der Verlaufsmodus ändert die URL so, dass sie mit der URL des normalen Anforderungs-Backends übereinstimmt. Wenn das Backend nicht mit der entsprechenden /user/id-Routing-Verarbeitung konfiguriert ist, wird ein 404-Fehler zurückgegeben

——Diese Implementierung erfordert also die Unterstützung des Servers und alle Routen müssen auf die Stammseite umgeleitet werden.

Im Aschemodus

1. In der vorherigen Hashänderung können Sie nur das URL-Segment nach # ändern. Die von pushState festgelegte neue URL kann jede beliebige URL mit demselben Ursprung wie die aktuelle URL sein.

2. Das Front-End-Routing ändert die Informationen in # und der Browser verwendet sie bei der Anforderung nicht, sodass kein Problem auftritt. Im Verlauf können Sie den Pfad jedoch frei ändern. Wenn beim Aktualisieren keine entsprechende Antwort oder Ressource auf dem Server vorhanden ist, wird innerhalb weniger Minuten eine 404-Fehlermeldung angezeigt.

Zusammenfassen

Damit ist dieser Artikel über die Unterschiede zwischen Hash-Modus und Verlaufsmodus in Vue-Router abgeschlossen. Weitere Informationen zu den Unterschieden zwischen den Vue-Router-Modi 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!