The navigate()
method of the Navigation
interface navigates to a specific URL, updating any provided state in the history entries list.
navigate(url)
navigate(url, options)
An object with the following properties:
committed
-
A Promise
which will fulfill when the visible URL has changed and a new NavigationHistoryEntry
has been created.
finished
-
A Promise
which will fulfill when all promises returned by the intercept()
handler are fulfilled. This is equivalent to the NavigationTransition.finished
promise fulfilling, when the navigatesuccess
event fires.
Either one of these promises rejects if the navigation has failed for some reason.
function initHomeBtn() {
const { key } = navigation.currentEntry;
backToHomeButton.onclick = () => {
navigation.traverseTo(key);
};
}
navigation.addEventListener("navigate", (event) => {
event.intercept({
async handler() {
},
});
});
A page-supplied "back" button can take you back, even after reload, by inspecting the previous history entries:
backButtonEl.addEventListener("click", () => {
if (
navigation.entries()[navigation.currentEntry.index - 1]?.url ===
"/product-listing"
) {
navigation.back();
} else {
navigation.navigate("/product-listing", { history: "replace" });
}
});
async function navigateHandler() {
await navigation.navigate(url, {
info: { animation: "swipe-right" },
state: { infoPaneOpen: true },
});
}