在 AngularJS 中，ui-router 是一个非常流行的路由库，它提供了比 AngularJS 自带的 ngRoute 库更加强大的功能，例如嵌套路由和状态机等。在使用 ui-router 进行路由时，经常需要传递参数，本文将介绍 ui-router 中参数传递及获取的方式。
传递参数
ui-router 提供了两种方式来传递参数：URL 参数和状态参数。URL 参数是通过 URL 来传递参数的，状态参数是通过状态配置对象来传递参数的。
URL 参数
URL 参数是通过 URL 来传递参数的，例如：
$stateProvider
.state('user', {
url: '/user/:id',
templateUrl: 'user.html',
controller: 'UserController'
});在上面的例子中，我们定义了一个名为 user 的状态，它有一个 URL 参数 id，我们可以通过访问 /user/123 的方式来传递参数。在控制器中，我们可以通过 $stateParams 服务来获取参数，例如：
app.controller('UserController', function($scope, $stateParams) {
$scope.userId = $stateParams.id;
});状态参数
状态参数是通过状态配置对象来传递参数的，例如：
-- -------------------- ---- -------
--------------
-------------- -
---- --------
------------ ------------
----------- -----------------
------- -
--- ----
-
---在上面的例子中，我们定义了一个名为 user 的状态，它有一个状态参数 id，我们可以通过在状态转换时传递参数的方式来传递参数。在控制器中，我们可以通过 $stateParams 服务来获取参数，例如：
app.controller('UserController', function($scope, $stateParams) {
$scope.userId = $stateParams.id;
});获取参数
ui-router 提供了两种方式来获取参数：$stateParams 和 $state.current.params。$stateParams 是一个服务，它可以获取当前状态的参数，$state.current.params 是一个对象，它包含了当前状态的所有参数。
$stateParams
$stateParams 是一个服务，它可以获取当前状态的参数，例如：
app.controller('UserController', function($scope, $stateParams) {
$scope.userId = $stateParams.id;
});在上面的例子中，我们可以通过 $stateParams.id 来获取当前状态的 id 参数。
$state.current.params
$state.current.params 是一个对象，它包含了当前状态的所有参数，例如：
app.controller('UserController', function($scope, $state) {
$scope.userId = $state.current.params.id;
});在上面的例子中，我们可以通过 $state.current.params.id 来获取当前状态的 id 参数。
示例代码
下面是一个完整的示例代码，它演示了如何在 ui-router 中传递和获取参数：
-- -------------------- ---- -------
--- --- - ----------------------- ---------------
----------------------------------- ------------------- -
--------------------------------------
--------------
-------------- -
---- --------
------------ ------------
----------- ----------------
--
-------------- -
---- ------------
------------ ------------
----------- ----------------
--
--------------- -
---- ---------
------------ -------------
----------- ------------------
------- -
-------- ----
-
---
---
-------------------------------- ---------------- -
-------------- - -------- -- -- ----------
---
-------------------------------- ---------------- ------------- -
------------- - ----------------
---
--------------------------------- ---------------- ------- -
-------------- - ------------------------------
---
结论
通过本文的介绍，我们了解了 ui-router 中参数传递及获取的方式，包括 URL 参数和状态参数，以及 $stateParams 和 $state.current.params 两种获取参数的方式。我们可以根据具体的需求选择不同的方式来传递和获取参数。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6746cb7ae504cb428ec4f8ba