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-outletを参照してください。

利用方法

<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>

CopyCopied

プロパティ

root
Description	By default `ion-router` will match the routes at the root path ("/"). That can be changed when
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 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.
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>`

ion-router

利用方法

プロパティ

root

useHash

イベント

メソッド

back

push