ui-router是怎样传参的-优快云博客

本文介绍如何在AngularJS中利用ui-router实现路由参数传递。通过$stateProvider定义带参数的路由，使用花括号或冒号指定参数名。此外，还可以通过正则表达式限制参数格式。最后，在控制器中通过$stateParams服务获取参数。

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

今天碰到一个需求，同事开发的业务中需要跳到我的业务中，并传递参数过来，这就需要将参数通过url路由传递过来。在angularjs中该怎样做呢？

我们知道通常路由控制都是通过引用ui-router库，调用$stateProvider和$urlRouterProvider服务来控制的，想要在路由中传递参数还是要找它们来解决。下面来分别说一下它们各自是怎么工作的。

$urlRouterProvider

$urlRouterProvider一般处理在状态配置中指定的url路由方式之外的 url 请求的路由方式。

$urlRouterProvider.otherwise('/index');

这个东西能不能在路由过程中传递参数还没有实践过，等研究清楚了再来细说。

$stateProvider

在$stateProvider中我们通常是这么设置的：

$stateProvider.state('search', {
    url: '/search',
    views: {
        'header': {
            templateUrl: "../common/header/head_nav.html",
            controller: 'headerCtrl'
        },
        'appState': {
            templateUrl: '../search/search.html',
            controller: "searchCtrl"
        }
    }
});

这里我们定义了一个路由search，里面包含了ui-view需要加载的视图和controller。现在我们给这个路由添加参数：

$stateProvider.state('search', {
    url: '/search/{id}',
    views: {
        'header': {
            templateUrl: "../common/header/head_nav.html",
            controller: 'headerCtrl'
        },
        'appState': {
            templateUrl: '../search/search.html',
            controller: "searchCtrl"
        }
    }
});

只需要花括号里面定义参数名就完成了，就是这么简单。而且不用花括号，使用冒号也是可以的：

$stateProvider.state('search', {
    url: '/search/:id',
    views: {
        'header': {
            templateUrl: "../common/header/head_nav.html",
            controller: 'headerCtrl'
        },
        'appState': {
            templateUrl: '../search/search.html',
            controller: "searchCtrl"
        }
    }
});

两种方式有什么区别呢？简单说就是花括号的形式功能更加强大，花括号里面是可以添加正则表达式的：

$stateProvider.state('search', {
    url: '/search/{id:[0-9]{1,8}}',
    views: {
        'header': {
            templateUrl: "../common/header/head_nav.html",
            controller: 'headerCtrl'
        },
        'appState': {
            templateUrl: '../search/search.html',
            controller: "searchCtrl"
        }
    }
});

甚至你还可以使用传统的http的get方式添加参数：

url: '/search?id&name'
//匹配 url: '/search?id=value1&name=value2'

很灵活很强大吧～接下来就是在到达页面获取到这些参数，这需要用到$stateParams服务。

controller: function($stateParams){
  $stateParams.id 
  $stateParams.name  
}

如果url中没有该参数，我们会得到undefined。

更详细的说明可以参考这里：https://github.com/angular-ui/ui-router/wiki/URL-Routing