ion-router

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

注記

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

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

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

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

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

基本的な使い方

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

Description	The root path to use when matching URLs. By default, this is set to "/", but you can specify an alternate prefix for all URL paths.
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 other side 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	Bubbles
ionRouteDidChange	Emitted when the route had changed	true
ionRouteWillChange	Event emitted when the route is about to change	true

メソッド

back

Description	Go back to previous page in the window.history.
Signature	back() => Promise<void>

push

Description	Navigate to the specified path.
Signature	push(path: string, direction?: RouterDirection, animation?: AnimationBuilder) => Promise<boolean>
Parameters	path: 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.