使用$location.search()读取URL参数异常及页面重载疑问

嘿，这两个问题都是AngularJS里使用$location服务时很常见的困惑，我来给你详细拆解下：

出现这种情况，大概率是以下几个原因之一：

• 未开启HTML5模式：AngularJS默认使用哈希模式（hashbang mode），也就是URL格式是http://localhost/#!/?test=baz这种带#!的。如果你的URL是http://localhost/?test=baz这种不带哈希前缀的，默认配置下$location只会解析#!后面的查询参数，自然就返回空对象了。解决方法是在模块配置里开启HTML5模式：

  angular.module('yourApp', [])
    .config(['$locationProvider', function($locationProvider) {
      $locationProvider.html5Mode(true);
    }]);
  

  注意开启后还要在页面的<head>里加<base href="/">，同时服务器端要配置重定向，避免刷新页面时出现404。
• 调用时机过早：如果在控制器初始化阶段就直接调用$location.search()，可能Angular还没完成对URL的解析工作。可以把获取参数的逻辑放到$locationChangeSuccess事件回调里，确保URL解析完成后再执行：

  angular.module('yourApp').controller('YourCtrl', ['$scope', '$location', function($scope, $location) {
    $scope.$on('$locationChangeSuccess', function() {
      console.log($location.search()); // 这里就能正确获取到参数了
    });
  }]);
  

• 忘记注入$location服务：虽然这个比较基础，但偶尔也会疏忽——一定要确保你的控制器/服务里已经正确注入了$location，不然调用的可能不是Angular的官方方法，自然拿不到正确结果。

这个说法得区分场景来看：

• 仅读取参数：如果只是调用$location.search()来获取当前URL的查询参数，完全不会触发页面重载，也不会让控制器重新初始化。这只是一个纯客户端的读取操作，不会影响页面状态。
• 修改参数：当你用$location.search()来修改查询参数时（比如$location.search('test', 'newVal')或者$location.search({test: 'newVal'})），正常情况下Angular只会修改URL的查询参数部分，不会触发页面刷新，控制器也不会重新初始化。Angular会通过自身的$digest循环更新视图，保持单页应用的特性。
• 你看到的文章里的说法，可能是指直接操作window.location而非使用$location服务，或者是在某些错误的配置下（比如未正确开启HTML5模式却手动修改了非哈希部分的URL）才会出现的异常情况。只要是按照Angular的规范使用$location服务，就不会触发页面重载。

内容的提问来源于stack exchange，提问作者Anders Lindén