Router
The Router component is a tool for navigating within web applications. This component supports complex navigation scenarios and lazy-load, enhancing application performance and user experience. It uses the other components Router Link, Router Outlet, and Route to do this.
In addition, it integrates seamlessly with WebJET Elements components, allowing you to easily implement navigation in your project.
The wj-router
component is tasked with managing all interactions with the browser history and grouping updates through the event system, and should only be found once in the application structure.
wj-router
is just a URL coordinator for the navigation outlets of ionic: wj-nav
, wj-tabs
, and wj-router-outlet
.
That means the wj-router
never touches the DOM, it does NOT show the components or emit any kind of lifecycle events, it just tells wj-nav
, wj-tabs
, and wj-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, wj-router
uses a declarative syntax using JSX/HTML to define a tree of routes.
Basic Usage
Interfaces
RouterEventDetail
interface RouterEventDetail {
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.
interface RouterCustomEvent extends CustomEvent {
detail: RouterEventDetail;
target: HTMLIonRouterElement;
}
Use
<wj-router>
<wj-route component="page-tabs">
<wj-route url="/schedule" component="tab-schedule">
<wj-route component="page-schedule"></wj-route>
<wj-route url="/session/:sessionId" component="page-session"></wj-route>
</wj-route>
<wj-route url="/speakers" component="tab-speaker">
<wj-route component="page-speaker-list"></wj-route>
<wj-route url="/session/:sessionId" component="page-session"></wj-route>
<wj-route url="/:speakerId" component="page-speaker-detail"></wj-route>
</wj-route>
<wj-route url="/map" component="page-map"></wj-route>
<wj-route url="/about" component="page-about"></wj-route>
</wj-route>
<wj-route url="/tutorial" component="page-tutorial"></wj-route>
<wj-route url="/login" component="page-login"></wj-route>
<wj-route url="/account" component="page-account"></wj-route>
<wj-route url="/signup" component="page-signup"></wj-route>
<wj-route url="/support" component="page-support"></wj-route>
</ion-router>
Attributes and Properties
root
Description | The root path to use when matching URLs. By default, this is set to "/", but you can specify an alternate prefix for all URL paths. |
Attribute | root |
Type | string |
Default | '/' |
useHash
Description | 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 work properly. 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. |
Attribute | use-hash |
Type | boolean |
Default | true |
Events
Name | Description |
---|---|
ionRouteDidChange | Emitted when the route had changed |
ionRouteWillChange | Event emitted when the route is about to change |
Methods
back
Description | Go back to previous page in the window.history. |
Signature | back() => Promise<void> |
push
Description | Navigate to the specified path. |
Signature | push(path: string, direction?: RouterDirection, animation?: AnimationBuilder) => Promise<boolean> |
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.