ion-route-redirect

路由重定向只能与其直接子级的 ion-router 一起使用。

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

note

注意：此组件应仅用于原生和 Stencil JavaScript 项目。对于 Angular 项目，请使用 ion-router-outlet 和 Angular 路由。

路由重定向有两个可配置的属性：

🌐 The route redirect has two configurable properties:

• from
• to

它会将 URL “从”一个地址重定向“到”另一个地址。当定义的 ion-route-redirect 规则匹配时，路由将会将 from 属性中指定的路径重定向到 to 属性中的路径。为了使重定向发生，from 路径需要与导航的 URL 完全匹配。

🌐 It redirects "from" a URL "to" another URL. When the defined ion-route-redirect rule matches, the router will redirect from the path specified in the from property to the path in the to property. In order for a redirect to occur the from path needs to be an exact match to the navigated URL.

多路由重定向

🌐 Multiple Route Redirects

可以在 ion-router 中定义任意数量的重定向路由，但只有一个可以匹配。

🌐 An arbitrary number of redirect routes can be defined inside an ion-router, but only one can match.

路由重定向永远不会在其自己的重定向之后调用另一个重定向，因为这可能会导致无限循环。

🌐 A route redirect will never call another redirect after its own redirect, since this could lead to infinite loops.

采取以下两个重定向：

🌐 Take the following two redirects:

<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 并停在那里。它永远不会评估超过一个重定向。

🌐 If the user navigates to /admin the router will redirect to /login and stop there. It will never evaluate more than one redirect.

用法

🌐 Usage

<!-- 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>

作为守卫的路由重定向

🌐 Route Redirects as Guards

重定向路由可以起到防护作用，防止用户根据给定条件（例如用户是否经过身份验证）导航到应用的某些区域。

🌐 Redirection routes can work as guards to prevent users from navigating to certain areas of an application based on a given condition, such as if the user is authenticated or not.

可以动态添加和移除路由重定向，以重定向（或保护）某些路由不被访问。在以下示例中，如果 isLoggedIn 是 false，所有 * 的网址将被重定向到 /login 网址。

🌐 A route redirect can be added and removed dynamically to redirect (or guard) some routes from being accessed. In the following example, all urls * will be redirected to the /login url if isLoggedIn is false.

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。

🌐 Alternatively, the value of to can be modified based on a condition. In the following example, the route redirect will check if the user is logged in and redirect to the /login url if not.

<ion-route-redirect id="tutorialRedirect" from="*"></ion-route-redirect>

const isLoggedIn = false;
const routeRedirect = document.querySelector('#tutorialRedirect');

routeRedirect.setAttribute('to', isLoggedIn ? undefined : '/login');

属性

🌐 Properties

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

事件

🌐 Events

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

方法

🌐 Methods

No public methods available for this component.

CSS 阴影部分

🌐 CSS Shadow Parts

No CSS shadow parts available for this component.

CSS 自定义属性

🌐 CSS Custom Properties

No CSS custom properties available for this component.

插槽

🌐 Slots

No slots available for this component.