ion-router
The router is a component for handling routing inside vanilla and Stencil JavaScript projects.
Apps should have a single ion-router component in the codebase.
This component controls all interactions with the browser history and it aggregates updates through an event system.
ion-router is just a URL coordinator for the navigation outlets of ionic: ion-nav, ion-tabs, and ion-router-outlet.
That means the ion-router never touches the DOM, it does NOT show the components or emit any kind of lifecycle events, it just tells ion-nav, ion-tabs, and ion-router-outlet what and when to "show" based on the browser's URL.
In order to configure this relationship between components (to load/select) and URLs, ion-router uses a declarative syntax using JSX/HTML to define a tree of routes.
Basic Usage
Interfaces
RouterEventDetail
interfaceRouterEventDetail{
from:string|null;
redirectedFrom:string|null;
to:string;
}
RouterCustomEvent
While not required, this interface can be used in place of the CustomEvent interface for stronger typing with Ionic events emitted from this component.
interfaceRouterCustomEventextendsCustomEvent{
detail: RouterEventDetail;
target: HTMLIonRouterElement;
}
Usage
<ion-router>
<ion-routecomponent="page-tabs">
<ion-routeurl="/schedule"component="tab-schedule">
<ion-routecomponent="page-schedule"></ion-route>
<ion-routeurl="/session/:sessionId"component="page-session"></ion-route>
</ion-route>
<ion-routeurl="/speakers"component="tab-speaker">
<ion-routecomponent="page-speaker-list"></ion-route>
<ion-routeurl="/session/:sessionId"component="page-session"></ion-route>
<ion-routeurl="/:speakerId"component="page-speaker-detail"></ion-route>
</ion-route>
<ion-routeurl="/map"component="page-map"></ion-route>
<ion-routeurl="/about"component="page-about"></ion-route>
</ion-route>
<ion-routeurl="/tutorial"component="page-tutorial"></ion-route>
<ion-routeurl="/login"component="page-login"></ion-route>
<ion-routeurl="/account"component="page-account"></ion-route>
<ion-routeurl="/signup"component="page-signup"></ion-route>
<ion-routeurl="/support"component="page-support"></ion-route>
</ion-router>
Properties
root
rootstring'/'useHash
/index.html#/path/to/page - Without hash: /path/to/pageUsing one or another might depend in the requirements of your app and/or where it's deployed.
Usually "hash-less" navigation works better for SEO and it's more user friendly too, but it might requires additional server-side configuration in order to properly work.
On the other side hash-navigation is much easier to deploy, it even works over the file protocol.
By default, this property is
true, change to false to allow hash-less URLs.use-hashbooleantrueEvents
| Name | Description | Bubbles |
|---|---|---|
ionRouteDidChange | Emitted when the route had changed | true |
ionRouteWillChange | Event emitted when the route is about to change | true |
Methods
back
back() => Promise<void>push
push(path: string, direction?: RouterDirection, animation?: AnimationBuilder) => Promise<boolean>direction: The direction of the animation. Defaults to
"forward".animation: A custom animation to use for the transition.
CSS Shadow Parts
No CSS shadow parts available for this component.
CSS Custom Properties
No CSS custom properties available for this component.
Slots
No slots available for this component.