ion-router

このルーターは、VanillaおよびStencil JavaScriptプロジェクト内のルーティングを処理するためのコンポーネントです。

注

注: このコンポーネントは、VanillaおよびStencil JavaScriptプロジェクトでのみ使用してください。フレームワーク固有のルーティングソリューションについては、Angular、React、Vueのルーティングガイドを参照してください。

アプリは、コードベース内に単一のion-routerコンポーネントを持つ必要があります。このコンポーネントは、ブラウザ履歴とのすべてのやり取りを制御し、イベントシステムを通じて更新を集約します。

ion-routerは、ionicのナビゲーションアウトレット(ion-nav、ion-tabs、ion-router-outlet)のURLコーディネーターにすぎません。

つまり、ion-routerはDOMに触れることは決してなく、コンポーネントを表示したり、ライフサイクルイベントを発行したりすることもありません。ブラウザのURLに基づいて、ion-nav、ion-tabs、ion-router-outletに何をいつ「表示」するかを指示するだけです。

コンポーネント(読み込み/選択)とURLの間のこの関係を構成するために、ion-routerはJSX/HTMLを使用してルートのツリーを定義する宣言的な構文を使用します。

基本的な使用法

インターフェース

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

説明	URLを照合する際に使用するルートパス。デフォルトでは、これは「/」に設定されていますが、すべてのURLパスに代替の接頭辞を指定できます。
属性	root
型	string
デフォルト	'/'

useHash

説明	ルーターは、次の2つの「モード」で動作できます。- ハッシュあり: /index.html#/path/to/page - ハッシュなし: /path/to/page どちらを使用するかは、アプリの要件や、デプロイ場所によって異なる場合があります。 通常、「ハッシュレス」ナビゲーションはSEOに適しており、ユーザーフレンドリーでもありますが、適切に機能させるには追加のサーバーサイド構成が必要になる場合があります。 一方、ハッシュナビゲーションはデプロイがはるかに簡単で、ファイルプロトコルでも機能します。 デフォルトでは、このプロパティはtrueです。ハッシュレスURLを許可するには、falseに変更します。
属性	use-hash
型	boolean
デフォルト	true

イベント

名前	説明	バブル
ionRouteDidChange	ルートが変更されたときに発行されます	true
ionRouteWillChange	ルートが変更されようとしているときに発行されるイベント	true

メソッド

back

説明	window.historyで前のページに戻ります。
署名	back() => Promise<void>

push

説明	指定されたパスに移動します。
署名	push(path: string, direction?: RouterDirection, animation?: AnimationBuilder) => Promise<boolean>

CSSシャドウパーツ

このコンポーネントで使用できるCSSシャドウパーツはありません。

CSSカスタムプロパティ

このコンポーネントで使用できるCSSカスタムプロパティはありません。

スロット

このコンポーネントで使用できるスロットはありません。