NavigateEvent: navigationType-Eigenschaft
Baseline
2026
Newly available
Since January 2026, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
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
| Specification |
|---|
| HTML # dom-navigateevent-navigationtype-dev |