学习 ui-router - 路由控制时查找的资料,记录下来以供后期使用

本文介绍如何在应用中配置URL及路由,包括基本URL设置、URL参数处理、嵌套状态路由控制等,帮助开发者掌握UI路由的使用技巧。

在你的应用中大多数状态都有与其相关联的 url,路由控制不是设计完成 state 之后的事后想法,而是开始开发时就应该考虑的问题。

这里是如何设置一个基本url。

180723_DoVi_2436510.png


URL参数当我们访问index.html/contacts时, 'contacts'状态将被激活,同时index.html中的ui-view将被'contacts.html'填充。或者,通过transitionTo('contacts')方法将状态转变到'contacts'状态,同时 url 将更新为index.html/contacts

基本参数

通常,url动态部分被称为参数,有几个选项用于指定参数。基本参数如下:

180740_CYjo_2436510.png

或者,你也可以使用花括号的方式来指定参数:

180757_K3y6_2436510.png

示例:

  • '/hello/' - 只匹配'/hello/'路径,没有对斜杠进行特殊处理,这种模式将匹配整个路径,而不仅仅是一个前缀。
  • '/user/:id' - 匹配'/user/bob''/user/1234!!!',甚至还匹配 '/user/',但是不匹配'/user''/user/bob/details'。第二个路径段将被捕获作为参数"id"
  • '/user/{id}' - 与前面的示例相同,但使用花括号语法。

含正则表达式的参数

使用花括号的方式可以设置一个正则表达式规则的参数:

180830_yemJ_2436510.png

'/user/{id:[^/]*}' - 与'/user/{id}'相同示例:

  • '/user/{id:[0-9a-fA-F]{1,8}}' - 与前面的示例相似,但只匹配1到8为的数字和字符
  • '/files/{path:.*}' - 匹配任何以'/files/'开始的URL路径,并且捕获剩余路径到参数'path'中。
  • '/files/*path' - 与前面相同,捕获所有特殊的语法。

警告:不要把捕获圆括号写进正则表达式,ui-router 的 UrlMatcher 将为整个正则表达式添加捕获。

Query Parameters

可以通过?来指定参数作为查询参数

180859_nrxY_2436510.png

如果你需要不止一个查询参数,请用&分隔:

180919_Adlg_2436510.png

嵌套状态的路由控制

附加的方式(默认)

在嵌套状态的路由控制中,默认方式是子状态的 url 附加到父状态的 url 之后。

181001_bint_2436510.png

'contacts'状态将匹配"/contacts"路由将成为:

  • 'contacts.list'状态将匹配"/contacts/list"。子状态的url是附在父状态的url之后的。

绝对路由(^)

如果你使用绝对 url 匹配的方式,那么你需要给你的url字符串加上特殊符号"^"

181103_3QUs_2436510.png

'contacts'状态将匹配"/contacts"路由将成为:

  • 'contacts.list'状态将匹配"/list"。子状态的url没有附在父状态的url之后的,因为使用了^

$stateParams 服务

之前看到的$stateParams服务是一个对象,包含 url 中每个参数的键/值。$stateParams可以为控制器或者服务提供 url 的各个部分。
注意:$stateParams服务必须与一个控制器相关,并且$stateParams中的“键/值”也必须事先在那个控制器的url属性中有定义。

181137_ZFW7_2436510.png

 

使用$stateParams的两个陷阱


1.只有当状态被激活并且状态的所有依赖项都被注入时,$stateParams对象才存在。这代表你不能再状态的resolve函数中使用$stateParams对象,可以使用$state.current.params来代替。

181325_oG3X_2436510.png

2.在状态控制器中,$stateParams对象只包含那些在状态中定义的参数,因此你不能访问在其他状态或者祖先状态中定义的参数。

181444_0qc1_2436510.png

$urlRouterProvider

$urlRouterProvider负责处理在状态配置中指定的url路由方式之外的 url 请求的路由方式。$urlRouterProvider负责监视$location,当$location改变后,$urlRouterProvider将从一个列表,一个接一个查找匹配项,直到找到。所有 url 都编译成一个UrlMatcher对象。

$urlRouterProvider有一些实用的方法,可以在module.config中直接使用。

when() for redirection 重定向

参数:

  • what String | RegExp | UrlMatcher,你想重定向的传入路径
  • handler String | Function 将要重定向到的路径

handler 作为 String
如果handler是字符串,它被视为一个重定向,并且根据匹配语法决定重定向的地址。

181618_7WLQ_2436510.png

函数可以返回:handler 作为 Function
如果handler是一个函数,这个函数是注入一些服务的。如果$location匹配成功,函数将被调用。你可以选择性注入$match

  • falsy 表明规则不匹配,$urlRouter将试图寻找另一个匹配
  • String 该字符串作为重定向地址并且作为参数传递给$location.url()
  • nothing或者任何为真的值,告诉$urlRouterurl 已经被处理

示例:

181649_QBlk_2436510.png


参数:otherwise() 无效路由

  • path String | Function 你想重定向url路径或者一个函数返回url路径。函数可以包含$injector$location两个参数。

181712_WVfN_2436510.png

参数:rule() 自定义url处理

  • handler Function 一个函数,包含$injector$location两个服务作为参数,函数负责返回一个有效的路径的字符串。181750_GjD6_2436510.png

  • 定义了url模式和参数占位符的语法。$urlMatcherFactory是在幕后被$urlRouterProvider调用,来缓存编译后的UrlMatcher对象,而不必在每次 location 改变后重新解析url。大多数用户不需要直接使用$urlMatcherFactory方法,但是在状态配置中非常实用,可以使用$urlMatcherFactory方法来生成一个UrlMatcher对象,并在状态配置中使用该对象。$urlMatcherFactory 和 UrlMatchers

 

转载于:https://my.oschina.net/u/2436510/blog/758938

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值