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 tell ion-nav and ion-tabs what and when to "show" based in 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 aditional 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	Description
`ionRouteDidChange`	Emitted when the route had changed
`ionRouteWillChange`	Event emitted when the route is about to change

Methods

Method	Description
`navChanged`
`printDebug`
`push`	Navigate to the specified URL

Built with StencilJS