ion-router

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

注記

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	Bubbles
ionRouteDidChange	ルートが変更されたときに発行されます。	true
ionRouteWillChange	ルートが変更されようとするときに発行されます。イベント	true

Methods

back

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

push

Description	指定されたパスに移動します。
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 Custom Properties

No CSS custom properties available for this component.

Slots

No slots available for this component.