Detaillierte Erklärung der beiden Modi des Router-Routings in Vue: Hash und Verlauf

Hash-Modus (Standard)

Funktionsprinzip: Überwachen Sie die Hashwertänderungen der Webseite -> Onhashchange-Ereignis, Standort-Hash abrufen

Verwenden Sie einen Hash der URL, um eine vollständige URL zu simulieren, sodass die Seite nicht neu geladen wird, wenn sich die URL ändert.

Dadurch entsteht für den Benutzer der Eindruck, dass die Webseite umgeleitet wurde, obwohl dies tatsächlich nicht der Fall ist.

Wird hauptsächlich in Single Page Applications (SPA) verwendet

//Simulationsprinzip//Änderungen des Seiten-Hashwerts überwachen window.onhashchange = function(){
	// Den Hashwert der aktuellen URL abrufen const _hash = location.hash
	// Je nach Hashwert unterschiedliche Inhalte anzeigen switch(_hash) {
	     Fall '/#a':
	        document.querySelector('#app').innerHTML = '<h1>Ich bin der Inhalt von Seite 1</h1>'
	        brechen;
	     Fall '/#b':
	        document.querySelector('#app').innerHTML = '<h1>Ich bin der Inhalt von Seite 2</h1>'
	        brechen;
	     Fall '/#c':
	        document.querySelector('#app').innerHTML = '<h1>Ich bin der Inhalt von Seite 3</h1>'
	        brechen;
	} 
}

Verlaufsmodus

Funktionsprinzip: Hauptsächlich verwenden history.pushState() API zum Ändern der URL ohne Aktualisieren der Seite.

Tatsächlich gibt es fünf Modi, die die URL ändern können, ohne die Seite zu aktualisieren.

Verlauf.pushState()

Verlauf.replaceState()

Geschichte.geh()

history.back() --> Entspricht history.go(-1)

history.forward() --> Entspricht history.go(1)

Benötigen Unterstützung bei der Backend-Konfiguration. Wenn Sie eine URL eingeben, die nicht existiert, muss die Backend-Konfiguration als „Backup-Konfiguration“ verwendet werden. Anstatt eine 404-Fehlermeldung zurückzugeben, wird zur Startseite zurückgekehrt.

Verlaufsmodus aktivieren

const router = neuer VueRouter({
  Modus: "Verlauf",
  Routen: [...]
})

Oben finden Sie detaillierte Informationen zu den beiden Router-Routing-Modi in Vue, Hash und Verlauf. Weitere Informationen zum Router-Routing-Modus in Vue finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!