Skip to main content
Version: v9

ion-router

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

note

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

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

ion-router は、ion-tabs と ion-router-outlet という Ionic のナビゲーションアウトレットのための URL コーディネーターです。

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

コンポーネント（ロードまたは選択）と URL の関係を設定するために、ion-router は JSX/HTML でルートツリーを定義する宣言的な構文を使用します。

基本的な使い方​

Using ion-nav within a Routed Page​

ion-router and ion-nav are separate systems. ion-router coordinates URL-based navigation through ion-router-outlet, while ion-nav manages a local stack that is independent of the URL. ion-nav does not integrate with ion-router: placing an ion-nav inside an ion-router does not turn it into a routed outlet, and pushing or popping views on an ion-nav never changes the URL.

The two can still be composed. A routed page rendered by ion-router-outlet can host its own ion-nav for local, URL-less navigation within that page. In the example below, navigating to /details updates the URL, but stepping through the ion-nav inside that page does not.

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​

DescriptionURLのマッチング時に使用するルートパスです。デフォルトでは"/"に設定されていますが、すべてのURLパスに対して代替プレフィックスを指定することができます。
Attributeroot
Typestring
Default'/'

useHash​

Descriptionルーターは2つの "モード "で動作します。- ハッシュを使用します。ハッシュあり： /index.html#/path/to/page - ハッシュなし。ハッシュなし： /path/to/page - ハッシュあり： /index.html#/path/to/page どちらを使うかは、アプリの要件や配置される場所によって異なるかもしれません。 通常、"ハッシュなし"ナビゲーションはSEOに有利で、よりユーザーフレンドリーですが、適切に動作させるためにサーバー側の追加設定が必要な場合があります。 一方、ハッシュ・ナビゲーションは、ファイル・プロトコルで動作するため、導入が非常に簡単です。 デフォルトでは、このプロパティは true です。ハッシュのない URL を許可するには false に変更します。
Attributeuse-hash
Typeboolean
Defaulttrue

イベント​

NameDescriptionBubbles
ionRouteDidChangeルートが変更されたときに発行されます。true
ionRouteWillChangeルートが変更されようとするときに発行されます。イベントtrue

メソッド​

back​

Descriptionwindow.historyで前ページに戻る。
Signatureback() => Promise<void>

push​

Description指定されたパスに移動します。
Signaturepush(path: string, direction?: RouterDirection, animation?: AnimationBuilder) => Promise<boolean>
Parameterspath: The path to navigate to.
direction: The direction of the animation. Defaults to "forward".
animation: A custom animation to use for the transition.

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.

Contents

Edit this page