ion-router
Router is a component for handling routing inside vanilla JavaScript projects. For Angular projects, use ion-router-outlet and the Angular router.
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 and ion-tabs.
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 and ion-tabs 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.
If you're using Angular, please see ion-router-outlet instead.
Properties
| Property | Attribute | Description | Type |
|---|---|---|---|
root |
root |
By default ion-router will match the routes at the root path ("/"). That can be changed when |
string |
useHash |
use-hash |
The router can work in two "modes": - With hash: /index.html#/path/to/page - Without hash: /path/to/page Using 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 otherside 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. |
boolean |
Events
| Event | Detail | Description |
|---|---|---|
ionRouteDidChange |
RouterEventDetail | Emitted when the route had changed |
ionRouteWillChange |
RouterEventDetail | Event emitted when the route is about to change |
Methods
goBack() => Promise<void>
Go back to previous page in the window.history.
Returns
Type: Promise<void>
navChanged(intent: number) => Promise<boolean>
Parameters
| Name | Type | Description |
|---|---|---|
intent |
number |
Returns
Type: Promise<boolean>
printDebug() => void
Returns
Type: void
push(url: string, direction?: RouterDirection) => Promise<boolean>
Navigate to the specified URL.
Parameters
| Name | Type | Description |
|---|---|---|
url |
string |
|
direction |
"back" | "forward" | "root" |
Returns
Type: Promise<boolean>
Built with StencilJS