Skip to main content
Version: v7

ion-route

ルートコンポーネントはコンポーネントを受け取り、ブラウザの URL が url プロパティと一致したときに、そのコンポーネントをレンダリングします。

note

Note: このコンポーネントは、vanilla と Stencil での JavaScriptプロジェクトでのみ使用してください。Angularプロジェクトでは、ion-router-outlet と Angularルータを使用してください。

ナビゲーションフック

ナビゲーションフックは、タスクを実行したり、ナビゲーションガードとして動作させるために使用することができます。フックは、各 ion-routebeforeEnterbeforeLeave プロパティに関数を提供することで使用します。true を返すとナビゲーションを進めることができ、false を返すとナビゲーションがキャンセルされる。NavigationHookOptions` 型のオブジェクトを返すと、ナビゲーションを別のページにリダイレクトすることができます。

Interfaces

interface NavigationHookOptions {
/**
* A valid path to redirect navigation to.
*/
redirect: string;
}

使い方

<ion-router>
<ion-route url="/home" component="page-home"></ion-route>
<ion-route url="/dashboard" component="page-dashboard"></ion-route>
<ion-route url="/new-message" component="page-new-message"></ion-route>
<ion-route url="/login" component="page-login"></ion-route>
</ion-router>
const dashboardPage = document.querySelector('ion-route[url="/dashboard"]');
dashboardPage.beforeEnter = isLoggedInGuard;

const newMessagePage = document.querySelector('ion-route[url="/dashboard"]');
newMessagePage.beforeLeave = hasUnsavedDataGuard;

const isLoggedInGuard = async () => {
const isLoggedIn = await UserData.isLoggedIn(); // Replace this with actual login validation

if (isLoggedIn) {
return true;
} else {
return { redirect: '/login' }; // If a user is not logged in, they will be redirected to the /login page
}
}

const hasUnsavedDataGuard = async () => {
const hasUnsavedData = await checkData(); // Replace this with actual validation

if (hasUnsavedData) {
return await confirmDiscardChanges();
} else {
return true;
}
}

const confirmDiscardChanges = async () => {
const alert = document.createElement('ion-alert');
alert.header = 'Discard Unsaved Changes?';
alert.message = 'Are you sure you want to leave? Any unsaved changed will be lost.';
alert.buttons = [
{
text: 'Cancel',
role: 'Cancel',
},
{
text: 'Discard',
role: 'destructive',
}
];

document.body.appendChild(alert);

await alert.present();

const { role } = await alert.onDidDismiss();

return (role === 'Cancel') ? false : true;
}

プロパティ

beforeEnter

Descriptionルーターがアクセスしようとしたときに発生するナビゲーションフックです。 trueを返すとナビゲーションを進めることができ、falseを返すとナビゲーションをキャンセルすることができます。NavigationHookOptions`オブジェクトを返すと、ルーターは指定されたパスにリダイレクトするようになります。
Attributeundefined
Type(() => NavigationHookResult | Promise<NavigationHookResult>) | undefined
Defaultundefined

beforeLeave

Descriptionルートが離脱しようとしたときに発生するナビゲーションフックです。 trueを返すとナビゲーションを進めることができ、falseを返すとナビゲーションをキャンセルすることができます。NavigationHookOptions`オブジェクトを返すと、ルーターは指定されたパスにリダイレクトするようになります。
Attributeundefined
Type(() => NavigationHookResult | Promise<NavigationHookResult>) | undefined
Defaultundefined

component

Descriptionルートが一致したときに、ナビゲーションアウトレット(ion-tabsion-nav)にロード/選択するコンポーネントの名前。 このプロパティの値は、常にロードするコンポーネントのタグ名とは限らず、ion-tabsでは、実際には選択する ion-tab の名前を指します。
Attributecomponent
Typestring
Defaultundefined

componentProps

Descriptionキーとなる値 { 'red': true, 'blue':'white'} には、レンダリング時に定義されたコンポーネントに渡すべき小道具が含まれる。
Attributeundefined
Typeundefined | { [key: string]: any; }
Defaultundefined

url

Descriptionこのルートを適用するために一致させる必要がある相対パスです。 expressjs と同様にパスを受け付けるので、/foo/:bar のような url でパラメータを定義し、受信する props で bar を利用することができます。
Attributeurl
Typestring
Default''

イベント

NameDescription
ionRouteDataChangedこのルートがいつ変更されたかを知るために ion-router が内部で使用します。

メソッド

No public methods available for this component.

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.