如何在AngularJS的ui-router中传递并捕获查询参数？

嘿，作为AngularJS新手碰到这个问题太正常了，别担心，完全可以实现你的需求！我来一步步给你讲清楚怎么做：

方法一：通过params配置直接映射查询参数 #

你不需要在url里额外声明，只要在params对象里对应上URL里的查询参数键名就行。修改你的代码如下：

$stateProvider.state('order', {
  url: '/order',
  views: {
    "mainContent": {
      templateUrl: 'order.html'
    }
  },
  params: {
    param1: null, // 对应URL中的?param1=xxx，null表示参数可选，无值时为null
    param2: null  // 对应URL中的?param2=xxx
  }
});

之后在对应的控制器里，只要注入$stateParams，就能直接拿到参数值：

app.controller('OrderController', function($stateParams) {
  console.log('param1的值:', $stateParams.param1); // 会输出"abc"
  console.log('param2的值:', $stateParams.param2); // 会输出"10"
});

方法二：在url中显式声明查询参数 #

如果你希望URL结构更直观，也可以直接在url属性里列出查询参数，这种方式同样能让$stateParams捕获到值：

$stateProvider.state('order', {
  url: '/order?param1&param2', // 这里直接把查询参数写进URL规则
  views: {
    "mainContent": {
      templateUrl: 'order.html'
    }
  },
  // 可选：如果需要设置默认值、是否必填等规则，依然可以用params配置
  params: {
    param1: { value: '默认值', squash: true }, // squash:true表示参数为默认值时，URL中不显示该参数
    param2: { value: 1, dynamic: true } // dynamic:true允许参数值动态变化而不重新加载状态
  }
});

两种方式的区别 #

• 方法一更灵活，适合不想在URL规则里暴露所有查询参数的场景；
• 方法二更清晰，能让其他开发者一眼看到该状态支持的查询参数。

你可以根据自己的需求选择任意一种方式，两种都能完美实现你捕获param1和param2的需求～

内容的提问来源于stack exchange，提问作者J.TrLu