ion-route-redirect

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

注記

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

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

• from
• to

これは、ある URL から別の 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 にリダイレクトされます。

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

Description	A redirect route, redirects "from" a URL "to" another URL. This property is that "from" URL. It needs to be an exact match of the navigated URL in order to apply. The path specified in this value is always an absolute path, even if the initial / slash is not specified.
Attribute	from
Type	string
Default	undefined

to

Description	A redirect route, redirects "from" a URL "to" another URL. This property is that "to" URL. When the defined ion-route-redirect rule matches, the router will redirect to the path specified in this property. The value of this property is always an absolute path inside the scope of routes defined in ion-router it can't be used with another router or to perform a redirection to a different domain. Note that this is a virtual redirect, it will not cause a real browser refresh, again, it's a redirect inside the context of ion-router. When this property is not specified or his value is undefined the whole redirect route is noop, even if the "from" value matches.
Attribute	to
Type	null ｜ string ｜ undefined
Default	undefined

イベント

Name	Description	Bubbles
ionRouteRedirectChanged	Internal event that fires when any value of this rule is added/removed from the DOM, or any of his public properties changes. ion-router captures this event in order to update his internal registry of router rules.	true

メソッド

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.