Skip to main content
Version: v7

ion-route-redirect

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

note

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リダイレクトルートは、ある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