NavigateEvent: navigationType-Eigenschaft
Baseline
2026
Neu verfügbar
Seit January 2026 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.
Die schreibgeschützte navigationType-Eigenschaft des NavigateEvent-Interfaces gibt den Typ der Navigation zurück — push, reload, replace oder traverse.
Wert
Ein enumerierter Wert, der den Typ der Navigation darstellt.
Die möglichen Werte sind:
push-
Ein neuer Standort wird angesteuert, wodurch ein neuer Eintrag in die Verlaufsliste eingefügt wird.
reload-
Der
Navigation.currentEntrywird neu geladen. replace-
Der
Navigation.currentEntrywird durch einen neuen Historieneintrag ersetzt. Dieser neue Eintrag wird denselbenkeywiederverwenden, aber eine andereidzugewiesen bekommen. traverse-
Der Browser navigiert von einem bestehenden Historieneintrag zu einem anderen bestehenden Historieneintrag.
Beispiele
Asynchrone Übergänge mit spezieller Behandlung von Zurück-/Vorwärtsnavigation
Manchmal ist es wünschenswert, Zurück-/Vorwärtsnavigationen speziell zu behandeln, z. B. durch Wiederverwendung von zwischengespeicherten Ansichten, indem sie auf den Bildschirm verschoben werden. Dies kann durch Verzweigung wie folgt erreicht werden:
navigation.addEventListener("navigate", (event) => {
// Some navigations, e.g. cross-origin navigations, we
// cannot intercept. Let the browser handle those normally.
if (!event.canIntercept) {
return;
}
// Don't intercept fragment navigations or downloads.
if (event.hashChange || event.downloadRequest !== null) {
return;
}
event.intercept({
async handler() {
if (myFramework.currentPage) {
await myFramework.currentPage.transitionOut();
}
let { key } = event.destination;
if (
event.navigationType === "traverse" &&
myFramework.previousPages.has(key)
) {
await myFramework.previousPages.get(key).transitionIn();
} else {
// This will probably result in myFramework storing
// the rendered page in myFramework.previousPages.
await myFramework.renderPage(event.destination);
}
},
});
});
Spezifikationen
| Spezifikation |
|---|
| HTML # dom-navigateevent-navigationtype-dev |