ion-route-redirect

ルートリダイレクトは、ion-router の直接の子としてのみ使用できます。

注記

注記: このコンポーネントは、プレーンなJavaScriptおよびStencil JavaScriptプロジェクトでのみ使用してください。Angularプロジェクトの場合は、ion-router-outlet とAngular Routerを使用してください。

ルートリダイレクトには、2つの設定可能なプロパティがあります。

• from
• to

これは、「from」のURLから「to」の別のURLにリダイレクトします。定義されたion-route-redirectルールが一致すると、ルーターはfromプロパティで指定されたパスからtoプロパティのパスにリダイレクトします。リダイレクトが発生するには、fromパスがナビゲーションされたURLと完全に一致する必要があります。

複数のルートリダイレクト

任意の数のリダイレクトルートをion-router内に定義できますが、一致できるのは1つだけです。

ルートリダイレクトは、無限ループにつながる可能性があるため、自身のリダイレクト後に別のリダイレクトを呼び出すことはありません。

次の2つのリダイレクトを例にとります。

<ion-router>
  <ion-route-redirect from="/admin" to="/login"></ion-route-redirect>
  <ion-route-redirect from="/login" to="/admin"></ion-route-redirect>
</ion-router>

ユーザーが/adminに移動すると、ルーターは/loginにリダイレクトし、そこで停止します。複数のリダイレクトは評価されません。

使用方法

<!-- Redirects when the user navigates to `/admin` but
will NOT redirect if the user navigates to `/admin/posts` -->
<ion-route-redirect from="/admin" to="/login"></ion-route-redirect>

<!-- By adding the wilcard character (*), the redirect will match
any subpath of admin -->
<ion-route-redirect from="/admin/*" to="/login"></ion-route-redirect>

ガードとしてのルートリダイレクト

リダイレクションルートは、ユーザーが認証済みかどうかなど、特定の条件に基づいて、アプリケーションの特定の領域への移動を防ぐガードとして機能できます。

ルートリダイレクトは動的に追加および削除して、一部のルートへのアクセスをリダイレクト（またはガード）できます。次の例では、isLoggedInがfalseの場合、すべてのURL*が/login URLにリダイレクトされます。

const isLoggedIn = false;

const router = document.querySelector('ion-router');
const routeRedirect = document.createElement('ion-route-redirect');
routeRedirect.setAttribute('from', '*');
routeRedirect.setAttribute('to', '/login');

if (!isLoggedIn) {
  router.appendChild(routeRedirect);
}

または、条件に基づいてtoの値を変更することもできます。次の例では、ルートリダイレクトはユーザーがログインしているかどうかを確認し、ログインしていない場合は/login URLにリダイレクトします。

<ion-route-redirect id="tutorialRedirect" from="*"></ion-route-redirect>

const isLoggedIn = false;
const routeRedirect = document.querySelector('#tutorialRedirect');

routeRedirect.setAttribute('to', isLoggedIn ? undefined : '/login');

プロパティ

from

説明	リダイレクトルート。「from」のURLから「to」の別のURLにリダイレクトします。このプロパティは、「from」のURLです。適用するには、ナビゲーションされたURLと完全に一致する必要があります。 この値で指定されたパスは、最初のスラッシュ/が指定されていない場合でも、常に絶対パスです。
属性	from
型	文字列
デフォルト	undefined

to

説明	リダイレクトルート。「from」のURLから「to」の別のURLにリダイレクトします。このプロパティは、「to」のURLです。定義されたion-route-redirectルールが一致すると、ルーターはこのプロパティで指定されたパスにリダイレクトします。 このプロパティの値は、ion-routerで定義されたルートのスコープ内では常に絶対パスであり、別のルーターで使用したり、異なるドメインへのリダイレクトを実行したりすることはできません。 これは仮想リダイレクトであることに注意してください。実際のブラウザーのリフレッシュは発生しません。これは、ion-routerのコンテキスト内のリダイレクトです。 このプロパティが指定されていない場合、またはその値がundefinedの場合、たとえ「from」の値が一致していても、リダイレクトルート全体はnoopになります。
属性	to
型	null｜文字列｜undefined
デフォルト	undefined

イベント

名前	説明	バブル
ionRouteRedirectChanged	このルールの値がDOMに追加/削除された場合、または公開プロパティのいずれかが変更された場合に発生する内部イベント。 ion-routerはこのイベントをキャプチャして、ルータールールの内部レジストリを更新します。	true

メソッド

このコンポーネントで使用できる公開メソッドはありません。

CSSシャドウパート

このコンポーネントで使用できるCSSシャドウパートはありません。

CSSカスタムプロパティ

このコンポーネントで使用できるCSSカスタムプロパティはありません。

スロット

このコンポーネントで使用できるスロットはありません。