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

root

string

By default ion-router will match the routes at the root path ("/"). That can be changed when

useHash

boolean

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.

Attributes

root

string

By default ion-router will match the routes at the root path ("/"). That can be changed when

use-hash

boolean

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.

Events

ionRouteDidChange

Emitted when the route had changed

ionRouteWillChange

Event emitted when the route is about to change

Methods

navChanged()

printDebug()

push()

Navigate to the specified URL

Built with StencilJS