The navigationType
read-only property of the NavigateEvent
interface returns the type of the navigation — push
, reload
, replace
, or traverse
.
An enumerated value representing the type of navigation.
The possible values are:
-
push
: A new location is navigated to, causing a new entry to be pushed onto the history list. -
reload
: The Navigation.currentEntry
is reloaded. -
replace
: The Navigation.currentEntry
is replaced with a new history entry. This new entry will reuse the same key
, but be assigned a different id
. -
traverse
: The browser navigates from one existing history entry to another existing history entry.
Sometimes it's desirable to handle back/forward navigations specially, e.g. reusing cached views by transitioning them onto the screen. This can be done by branching as follows:
navigation.addEventListener("navigate", (event) => {
if (!event.canIntercept) {
return;
}
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 {
await myFramework.renderPage(event.destination);
}
},
});
});