ion-route-redirect

路由重新導向只能與 ion-router 作為其直接子項使用。

注意

注意：此組件應僅用於原生和 Stencil JavaScript 專案。對於 Angular 專案，請使用 ion-router-outlet 和 Angular 路由器。

路由重新導向具有兩個可配置的屬性

• from
• to

它會將 URL 從「from」重新導向至另一個 URL「to」。當定義的 ion-route-redirect 規則符合時，路由器會將從 from 屬性中指定的路徑重新導向至 to 屬性中的路徑。為了使重新導向發生，from 路徑需要與導覽的 URL 完全相符。

多個路由重新導向

可以在 ion-router 內定義任意數量的重新導向路由，但只能符合一個。

路由重新導向永遠不會在其自身重新導向後呼叫另一個重新導向，因為這可能會導致無限迴圈。

考慮以下兩個重新導向

<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

描述	重新導向路由會將 URL 從「from」重新導向至另一個 URL「to」。此屬性是「from」URL。它需要與導覽的 URL 完全相符才能套用。 此值中指定的路徑始終是絕對路徑，即使未指定初始的 / 斜線。
屬性	from
類型	字串
預設值	未定義

to

描述	重新導向路由會將 URL 從「from」重新導向至另一個 URL「to」。此屬性是「to」URL。當定義的 ion-route-redirect 規則符合時，路由器會重新導向至此屬性中指定的路徑。 此屬性的值始終是 ion-router 中定義的路由範圍內的絕對路徑，它不能與另一個路由器一起使用，也不能執行重新導向至不同的網域。 請注意，這是虛擬重新導向，它不會導致真正的瀏覽器重新整理，再次強調，它是在 ion-router 的內容中進行的重新導向。 當未指定此屬性或其值為 undefined 時，即使「from」值符合，整個重新導向路由也是無操作的。
屬性	to
類型	null｜字串｜未定義
預設值	未定義

事件

名稱	描述	冒泡
ionRouteRedirectChanged	當此規則的任何值從 DOM 中新增/移除時，或其任何公共屬性變更時觸發的內部事件。 ion-router 會擷取此事件，以便更新其路由規則的內部註冊。	true

方法

此組件沒有可用的公共方法。

CSS 陰影部分

此組件沒有可用的 CSS 陰影部分。

CSS 自訂屬性

此組件沒有可用的 CSS 自訂屬性。

插槽

此組件沒有可用的插槽。