angularjs ui-router传值

本文深入介绍了UI-Router的概念及其在状态管理和路由配置中的应用。详细解释了如何通过URL和State进行参数传递,并对比了这两种方法的特点。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

首先我们了解一下ui-router.

ui-router引入状态机制,将路由抽象概括成一个个的状态。其中状态里包含多种属性 state,url,params等多种内容。

state:当前路由所处的状态

url:当前路由对应的url正则路径

params:传递的参数

当然了还有views,templates,abstract等属性,但由于和传参无关,因此不再介绍。

 

在ui-router中,state可以映射对应url,同样的url也可以映射到state。我们考虑的无非是使用

url或者state传值。

$stateProvider
.state('home',{
    url:'/home',
    params: ''
     } 
)                            

如上所示案例,当前state是home,url地址是/home。

1、url传值

 url:'/home/:userID',
 url:'/home/{userID}'

常见方法有:param或者{param}两种方式。如当我们设置url  ‘/home/235’时,可以获取userID=235的参数信息。

2、state传值

ui-sref='home({userID:235})'
$state.go('home',{userID:235})

常见的state传值的有以上两种,也可以归为一种,只是表面形式看起来不同而已。

url传值,state传值 个人感觉最大的区别时在于跳转的情境中。

如a页面将参数A传递到b页面,state传值想要正常打开b页面,只能从a页面进入,或者说从a页面的状态进入,否则便获取不到A参数。然而url传值则可以 不经过A页面直接获取到参数A。

 

3、params传参

我们也可以直接定义params里的参数列表

params:{
    userID:XXX                
}

但是此种传参的方法局限性比较大,适合需要设置初始化值的参数,后续可以在controller中修改参数的取值。

 

转载于:https://www.cnblogs.com/perallina/p/6549965.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值