ion-router
ルーターは、vanilla と Stencil での JavaScriptプロジェクト内でルーティングを処理するためのコンポーネントです。
注記
アプリケーションはコードベースに単一の ion-router
コンポーネントを持たなければなりません。
このコンポーネントは、ブラウザの履歴とのすべての対話を制御し、イベント・システムを介して更新を集約します。
ion-router
は、ion-nav
と ion-tabs
、 ion-router-outlet
というIonicのナビゲーション機能のURL調整機能に過ぎません。
つまり、 ion-router
はDOMにアクセスすることはなく、コンポーネントを表示することも、何らかのライフサイクルイベントを発行することもなく、ブラウザのURLに基づいて、ion-nav
と ion-tabs
、 ion-router-outlet
に何をいつ「show」すべきかを指示するだけです。
コンポーネント(ロード/選択)とURLの間の関係を設定するために、ion-router
はJSX/HTMLを使ってルートのツリーを定義する宣言的な構文を利用します。
基本的な使い方
Interfaces
RouterEventDetail
interface RouterEventDetail {
from: string | null;
redirectedFrom: string | null;
to: string;
}
RouterCustomEvent
必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、CustomEvent
インターフェースの代わりにこのインターフェースを使用することが可能です。
interface RouterCustomEvent extends CustomEvent {
detail: RouterEventDetail;
target: HTMLIonRouterElement;
}
使い方
<ion-router>
<ion-route component="page-tabs">
<ion-route url="/schedule" component="tab-schedule">
<ion-route component="page-schedule"></ion-route>
<ion-route url="/session/:sessionId" component="page-session"></ion-route>
</ion-route>
<ion-route url="/speakers" component="tab-speaker">
<ion-route component="page-speaker-list"></ion-route>
<ion-route url="/session/:sessionId" component="page-session"></ion-route>
<ion-route url="/:speakerId" component="page-speaker-detail"></ion-route>
</ion-route>
<ion-route url="/map" component="page-map"></ion-route>
<ion-route url="/about" component="page-about"></ion-route>
</ion-route>
<ion-route url="/tutorial" component="page-tutorial"></ion-route>
<ion-route url="/login" component="page-login"></ion-route>
<ion-route url="/account" component="page-account"></ion-route>
<ion-route url="/signup" component="page-signup"></ion-route>
<ion-route url="/support" component="page-support"></ion-route>
</ion-router>
プロパティ
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 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. |
Attribute | use-hash |
Type | boolean |
Default | true |
イベント
Name | Description | Bubbles |
---|---|---|
ionRouteDidChange | Emitted when the route had changed | true |
ionRouteWillChange | Event emitted when the route is about to change | true |
メソッド
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カスタムプロパティ
No CSS custom properties available for this component.
Slots
No slots available for this component.