ion-router
Routerは、一般的なJavaScriptプロジェクト内でルーティングを処理するためのコンポーネントです。Angularプロジェクトの場合は、
ion-router-outlet
とAngularルーターを使用します。
アプリケーションはコードベースに単一の ion-router
コンポーネントを持たなければならない。
このコンポーネントは、ブラウザの履歴とのすべての対話を制御し、イベント・システムを介して更新を集約します。
ion-router
は、ion-nav
と ion-tabs
というIonicのナビゲーション機能のURL調整機能に過ぎません。
つまり、 ion-router
はDOMにアクセスすることはなく、コンポーネントを表示することも、何らかのライフサイクルイベントを発行することもなく、ブラウザのURLに基づいて、ion-nav
と ion-tabs
に何をいつ「show」すべきかを指示するだけです。
コンポーネント(ロード/選択)とURLの間の関係を設定するために、ion-router
はJSX/HTMLを使ってルートのツリーを定義する宣言的な構文を利用します。
Angularを使用している場合は、
利用方法
<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 | By default
|
Attribute | root |
Type | string |
Default | '/' |
useHash | |
Description | The router can work in two "modes":
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 |
Attribute | use-hash |
Type | boolean |
Default | true |
イベント
Name | Description |
---|---|
ionRouteDidChange | Emitted when the route had changed |
ionRouteWillChange | Event emitted when the route is about to change |
メソッド
back | |
---|---|
Description | Go back to previous page in the window.history. |
Signature | back() => Promise<void> |
push | |
Description | Navigate to the specified URL. |
Signature | push(url: string, direction?: RouterDirection, animation?: AnimationBuilder | undefined) => Promise<boolean> |