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:
pushA new location is navigated to, causing a new entry to be pushed onto the history list.
reloadThe Navigation.currentEntry is reloaded.
replaceThe Navigation.currentEntry is replaced with a new history entry. This new entry will reuse the same key, but be assigned a different id.
traverseThe 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) => {
// 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);
}
},
});
});