在 AngularJS 单页面应用中，我们经常需要使用路由进行页面跳转。有时候我们需要传递一些参数给目标页面进行处理，比如搜索关键字、用户 ID 等等。那么在 AngularJS 中，如何进行路由跳转参数传递呢？本文将会介绍常用的两种方案，并且提供示例代码。
方案一：查询字符串
查询字符串是最常用的参数传递方式，它是将参数以键值对的形式追加在 URL 后面的一段字符串，比如：
http://example.com/search?keyword=hello
在 AngularJS 中，我们可以通过 $location.search(key, value) 方法来设置查询字符串的值。假设我们要传递一个关键字参数 keyword 给搜索页面，我们可以这样写：
$location.search('keyword', 'hello');
$location.path('/search');在搜索页面，我们可以通过 $routeParams 服务来获取查询字符串的值。$routeParams 是 AngularJS 内置的一个服务，可以获取 URL 中的参数值。我们只需要在控制器中注入 $routeParams，然后就可以获取到查询字符串中的值了。示例代码如下：
app.controller('SearchController', function($routeParams) {
var keyword = $routeParams.keyword;
console.log(keyword); // 输出 'hello'
});方案二：路由参数
路由参数是将参数嵌入在路由地址中的一种方式，比如：
http://example.com/users/123
在上面的链接中，123 就是用户的 ID。在 AngularJS 中，我们可以在路由配置中定义路由参数。示例代码如下：
app.config(function($routeProvider) {
$routeProvider.when('/users/:id', {
templateUrl: 'user.html',
controller: 'UserController'
});
});在 :id 前面加上 :，表示这是一个路由参数。在控制器中，我们可以通过 $routeParams 服务来获取路由参数的值。示例代码如下：
app.controller('UserController', function($routeParams) {
var userId = $routeParams.id;
console.log(userId); // 输出 '123'
});对比与总结
以上是两种常用的路由跳转参数传递方式。它们各有优缺点，选择哪种方式取决于具体的业务需求。
查询字符串的优点是传递简单、使用方便，适用于传递少量的、非敏感的参数。但是，如果传递的参数过多，查询字符串就会比较长，很容易暴露在 URL 中，对用户体验和安全性都有影响。
路由参数的优点是可以将参数隐藏在 URL 中，对用户体验和安全性更好。但是，它的缺点是传递的参数只能在路由地址中定义，不够灵活，适用于传递一些比较重要的参数。
综上所述，我们可以根据实际情况选择合适的路由跳转参数传递方式。在 AngularJS 中，我们可以通过 $location 和 $routeParams 服务来实现参数传递，代码量也相对较少，非常方便实用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e9c9eef6b2d6eab34f47ea