Navigation: traverseTo() method
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental:This is anexperimental technology
Check theBrowser compatibility table carefully before using this in production.
ThetraverseTo() method of theNavigation interface navigates to theNavigationHistoryEntry identified by the givenkey.
Syntax
traverseTo(key)traverseTo(key, options)Parameters
keyThe
keyof theNavigationHistoryEntryto navigate to.optionsOptionalAn options object containing the following properties:
infoOptionalDeveloper-defined information to be passed along to the
navigateevent, made available inNavigateEvent.info. This can be any data type. You might, for example, wish to display newly-navigated content with a different animation depending on how it was navigated to (swipe left, swipe right, or go home). A string indicating which animation to use could be passed in asinfo.
Return value
An object with the following properties:
committedA
Promisewhich will fulfill when the visible URL has changed and a newNavigationHistoryEntryhas been created.finishedA
Promisewhich will fulfill when all promises returned by theintercept()handler are fulfilled. This is equivalent to theNavigationTransition.finishedpromise fulfilling, when thenavigatesuccessevent fires.
Either one of these promises rejects if the navigation has failed for some reason.
Exceptions
InvalidStateErrorDOMExceptionThrown if the
Navigation.currentEntry'sNavigationHistoryEntry.indexvalue is -1, meaning the currentDocumentis not yet active, or if the navigation history list does not contain aNavigationHistoryEntrywith the specified key, or if the currentDocumentis unloading.
Examples
Set up home button
function initHomeBtn() { // Get the key of the first loaded entry // so the user can always go back to this view. const { key } = navigation.currentEntry; backToHomeButton.onclick = () => { navigation.traverseTo(key); };}// Intercept navigate events, such as link clicks, and// replace them with single-page navigationsnavigation.addEventListener("navigate", (event) => { event.intercept({ async handler() { // Navigate to a different view, // but the "home" button will always work. }, });});Specifications
| Specification |
|---|
| HTML # dom-navigation-traverseto-dev |