NavigateEvent: navigationType property
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The navigationType
read-only property of the
NavigateEvent
interface returns the type of the navigation — push
, reload
, replace
, or traverse
.
Value
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
: TheNavigation.currentEntry
is reloaded.replace
: TheNavigation.currentEntry
is replaced with a new history entry. This new entry will reuse the samekey
, but be assigned a differentid
.traverse
: The browser navigates from one existing history entry to another existing history entry.
Examples
Async transitions with special back/forward handling
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:
js
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);
}
},
});
});
Specifications
Specification |
---|
Unknown specification # dom-navigateevent-navigationtype |
Browser compatibility
BCD tables only load in the browser