Einige Kenntnisse über Vue-Router

Tipp: Einige Wissenspunkte des Vue-Routers werden kontinuierlich aktualisiert

---

Mehrere Routing-Modi des Vue-Routers?

Der Vue-Router verfügt über drei Routing-Modi: Hash, Verlauf, Abstrakt. Der entsprechende Quellcode lautet wie folgt:

switch (mode) {
    
    
  case 'history':
    this.history = new HTML5History(this, options.base)
    break
  case 'hash':
    this.history = new HashHistory(this, options.base, this.fallback)
    break
  case 'abstract':
    this.history = new AbstractHistory(this, options.base)
    break
  default:
    if (process.env.NODE_ENV !== 'production') {
    
    
      assert(false, `invalid mode: ${
      
      mode}`)
    }
}

Darunter sind die Beschreibungen der drei Routing-Modi wie folgt:

• Hash: Verwenden Sie den URL-Hashwert für das Routing. Unterstützt alle Browser, einschließlich Browser, die die HTML5-Verlaufs-API nicht unterstützen;
• Verlauf: hängt von der HTML5-Verlaufs-API und der Serverkonfiguration ab. Einzelheiten finden Sie im HTML5-Verlaufsmodus.
• Zusammenfassung: Unterstützt alle JavaScript-Laufzeitumgebungen, z. B. Node.js serverseitig. Router werden automatisch in diesen Modus gezwungen, wenn keine Browser-API gefunden wird.

Wird das Implementierungsprinzip der Hash- und History-Routing-Modi häufig im Vue-Router verwendet?

(1) Implementierungsprinzip des Hash-Modus Die
frühe Implementierung des Front-End-Routings basiert auf location.hash. Das Realisierungsprinzip ist sehr einfach: Der Wert von location.hash ist der Inhalt nach # in der URL. Beispielsweise lautet der location.hash-Wert der folgenden Website „#search“:
https://www.word.com#search
Die Implementierung des Hash-Routing-Modus basiert hauptsächlich auf den folgenden Merkmalen:

• Der Hash-Wert in der URL ist nur ein Status des Clients. Das heißt, wenn eine Anfrage an den Server gestellt wird, wird der Hash-Teil nicht gesendet.
• Durch eine Änderung des Hash-Werts wird ein Datensatz zum Zugriffsverlauf des Browsers hinzugefügt. Daher können wir die Hash-Umschaltung über die Vor- und Zurück-Schaltflächen des Browsers steuern;
• Sie können das a-Tag übergeben und das href-Attribut festlegen. Wenn der Benutzer auf dieses Tag klickt, ändert sich der Hash-Wert der URL; oder Sie können JavaScript verwenden, um loaction.hash einen Wert zuzuweisen, um den Hash-Wert der URL zu ändern;
• Wir können das Hashchange-Ereignis verwenden, um Änderungen im Hash-Wert zu überwachen und dadurch die Seite zu überspringen (zu rendern).

---

(2) Implementierungsprinzip des Verlaufsmodus
HTML5 stellt eine Verlaufs-API bereit, um URL-Änderungen zu realisieren. Darunter gibt es zwei Haupt-APIs: History.pushState() und History.repalceState(). Diese beiden APIs können den Browserverlauf bearbeiten, ohne ihn zu aktualisieren.
Der einzige Unterschied besteht darin, dass ersteres einen neuen historischen Datensatz hinzufügt, während letzteres den aktuellen historischen Datensatz direkt ersetzt, wie unten gezeigt: Die
window.history.pushState(null, null, path); window.history.replaceState(null, null, path);
Implementierung des Verlaufsroutingmodus basiert hauptsächlich auf den folgenden Merkmalen:

• PushState und repalceState sind zwei APIs zum Betreiben und Implementieren von URL-Änderungen.
• Wir können das Popstate-Ereignis verwenden, um die Änderung der URL zu überwachen und so zur Seite zu springen (zu rendern).
• History.pushState() oder History.replaceState() lösen das Popstate-Ereignis nicht aus, dann müssen wir den Seitensprung (Rendering) manuell auslösen.