Skip to main content
Version: v7

ion-route-redirect

A route redirect can only be used with an ion-router as a direct child of it.

note

Note: このコンポーネントは、バニラおよびステンシル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リダイレクトルートは、あるURLから別のURLへリダイレクトさせるルートです。このプロパティは、その "from" URLです。このプロパティを適用するには、ナビゲートされるURLと完全に一致する必要があります。 この値で指定されるパスは、最初の / スラッシュが指定されていない場合でも、常に絶対パスとなります。
Attributefrom
Typestring
Defaultundefined

to

Descriptionリダイレクトルートは、あるURLから別のURLへリダイレクトさせるルートです。このプロパティは、その "to "URLです。定義された ion-route-redirect ルールにマッチした場合、ルータはこのプロパティで指定されたパスにリダイレクトします。 このプロパティの値は、常に ion-router で定義されたルートの範囲内の絶対パスであり、別のルータや別のドメインへのリダイレクトを実行するために使用することはできません。 これは仮想的なリダイレクトであり、実際のブラウザのリフレッシュを引き起こすことはないことに注意してください。 このプロパティが指定されていない場合、または値が undefined の場合、たとえ "from" の値が一致しても、リダイレクトルート全体は noop となります。
Attributeto
Typenull ｜ string ｜ undefined
Defaultundefined

イベント

NameDescription
ionRouteRedirectChangedこのルールの値がDOMから追加/削除されたり、パブリックプロパティが変更されたりしたときに発生する内部イベントです。 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.

Contents

Edit this page