ion-router

Contents

Routerは、一般的なJavaScriptプロジェクト内でルーティングを処理するためのコンポーネントです。Angularプロジェクトの場合は、 ion-router-outlet とAngularルーターを使用します。

アプリケーションはコードベースに単一の ion-router コンポーネントを持たなければならない。 このコンポーネントは、ブラウザの履歴とのすべての対話を制御し、イベント・システムを介して更新を集約します。

ion-router は、ion-navion-tabs というイオンのナビゲーション機能のURL調整機能に過ぎません。

つまり、 ion-router はDOMにアクセスすることはなく、コンポーネントを表示することも、何らかのライフサイクルイベントを発行することもなく、ブラウザのURLに基づいて、ion-navion-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>

プロパティ

root

Description

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

Attributeroot
Typestring
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.

Attributeuse-hash
Typeboolean
Defaulttrue

イベント

NameDescription
ionRouteDidChangeEmitted when the route had changed
ionRouteWillChangeEvent emitted when the route is about to change

メソッド

back

Description

Go back to previous page in the window.history.

Signatureback() => Promise<void>

push

Description

Navigate to the specified URL.

Signaturepush(url: string, direction?: RouterDirection) => Promise<boolean>