Flutter教程

Ionic实战视频教程(跨平台)： https://www.itying.com/goods-1067.html

Flutter实战视频教程(跨平台)： https://www.itying.com/goods-1176.html

ion-route-redirect

概要(CONTENTS)

Ionic4项目中我们可以使用Ionic4路由组件ion-route-redirect对项目进行布局。

ion-route-redirect官方文档地址:https://ionicframework.com/docs/api/route-redirect

A redirect router can only be used in the scope of ion-router as a direct children of it.

Note: this is only meant for vanilla JavaScript project. For Angular projects, use ion-router-outlet and the Angular router.

This route has only two configurable values:

  • from
  • to

Their meaning is obvious under the context of a redirection, that occurs from a given URL to another given URL.

In other for a redirection to occurs the from path needs to be an exact match of the navigated URL.

Redirection evaluation

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

Also, a redirection route WILL never redirect to another redirection router, since this could lead to infinity loops.

Let's say we have this two redirection rules:

<ion-router>
  <ion-route-redirect from="/admin" to="/login"/>
  <ion-route-redirect from="/login" to="/admin"/>
ion-router>

And the user navigates to /admin. The router will then redirect to /login and stop there.

It WILL NOT never evaluate more than one redirection rule in a roll.

Examples

Simple path 

<ion-route-redirect from="/admin" to="/login">

This route will apply (redirect) when the user navigates to: /admin but it will NOT apply if the user navigates to /admin/posts.

In order to match any subpath of admin, the wildcard character (*) needs to be used.

<ion-route-redirect from="/admin/*" to="/login">

Redirect all routes to login

Redirection routes can work as guards, since that can prevent user to navigate to areas to your application based in a given condition, for example, if the user is authenticated or not.

{!this.isLoggedIn &&
  <ion-route-redirect from="*" to="/login"/> }

A router can be added and removed dynamically to redirect (or guard) some routes from being accessed.

Another approach is to modify the value of to, since given to the value of null or undefined makes disables the redirection.

 <ion-route-redirect from="*" to={this.isLoggedin ? undefined : '/login'}/>

ion-route-redirect　属性(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

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

ion-route-redirect　事件(Events)

Name Description
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.