NavigateEvent: info property
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The info
read-only property of the
NavigateEvent
interface returns the info
data value passed by the initiating navigation operation (e.g. Navigation.back()
, or Navigation.navigate()
), or undefined
if no info
data was passed.
Value
The info
value passed by the initiating navigation operation, or undefined
if none was passed.
Examples
One example of how info
might be used is to trigger different single-page navigation renderings depending on how a certain route was reached. For example, consider a photo gallery app, where you can reach the same photo URL and state via various routes. You might want to use a different animation to show the photo for each route.
js
navigation.addEventListener("navigate", (event) => {
if (isPhotoNavigation(event)) {
event.intercept({ async handler() {
switch (event.info.?via) {
case "go-left": {
await animateLeft();
break;
}
case "go-right": {
await animateRight();
break;
}
case "gallery": {
await animateZoomFromThumbnail(event.info.thumbnail);
break;
}
}
// TODO: actually load the photo.
} });
}
});
Specifications
Specification |
---|
Unknown specification # dom-navigateevent-info |
Browser compatibility
BCD tables only load in the browser
See also
- Modern client-side routing: the Navigation API
- Navigation API explainer
- Domenic Denicola's Navigation API live demo
- Methods that allow info to be passed —
Navigation.back()
,Navigation.forward()
,Navigation.navigate()
,Navigation.reload()
, andNavigation.traverseTo()