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
类型	string
默认值	undefined

to

描述	重定向路由，将 URL 从 "from" 重定向到另一个 URL "to"。此属性是该 "to" URL。当定义的 ion-route-redirect 规则匹配时，路由器将重定向到此属性中指定的路径。 此属性的值始终是 ion-router 中定义的路由范围内的绝对路径，它不能与另一个路由器一起使用，也不能用于执行到不同域的重定向。 请注意，这是一个虚拟重定向，它不会导致真正的浏览器刷新，同样，它是在 ion-router 的上下文中进行的重定向。 当此属性未指定或其值为 undefined 时，即使 "from" 值匹配，整个重定向路由也是 noop。
属性	to
类型	null ｜ string ｜ undefined
默认值	undefined

事件

名称	描述	冒泡
ionRouteRedirectChanged	当此规则的任何值从 DOM 中添加/删除，或其任何公共属性发生更改时触发的内部事件。 ion-router 会捕获此事件，以更新其路由规则的内部注册表。	true

方法

此组件没有可用的公共方法。

CSS 阴影部分

此组件没有可用的 CSS 阴影部分。

CSS 自定义属性

此组件没有可用的 CSS 自定义属性。

插槽

此组件没有可用的插槽。