ion-router

The router is a component for handling routing inside vanilla and Stencil JavaScript projects.

note

Note: This component should only be used with vanilla and Stencil JavaScript projects. See the routing guides for Angular, React, and Vue for framework-specific routing solutions.

アプリケーションはコードベースに単一の 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
ionRouteDidChange	ルートが変更されたときに発します。
ionRouteWillChange	ルートが変更されようとするときに発行されます。イベント

メソッド

back

Description	window.historyで前ページに戻る。
Signature	back() => Promise<void>

push

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

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.