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.

Apps should have a single ion-router component in the codebase. This component controls all interactions with the browser history and it aggregates updates through an event system.

ion-router is just a URL coordinator for the navigation outlets of ionic: ion-nav, ion-tabs, and ion-router-outlet.

That means the ion-router never touches the DOM, it does NOT show the components or emit any kind of lifecycle events, it just tells ion-nav, ion-tabs, and ion-router-outlet what and when to "show" based on the browser's URL.

In order to configure this relationship between components (to load/select) and URLs, ion-router uses a declarative syntax using JSX/HTML to define a tree of routes.

Basic Usage

Interfaces

RouterEventDetail

interface RouterEventDetail {
  from: string | null;
  redirectedFrom: string | null;
  to: string;
}

RouterCustomEvent

While not required, this interface can be used in place of the CustomEvent interface for stronger typing with Ionic events emitted from this component.

interface RouterCustomEvent extends CustomEvent {
  detail: RouterEventDetail;
  target: HTMLIonRouterElement;
}

Usage

<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>

Properties

root

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

useHash

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

Events

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

Methods

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 Custom Properties

No CSS custom properties available for this component.

Slots

No slots available for this component.