AngularJS 添加到浏览器历史记录，无需重新加载页面，也无需 HTML5 推送状态答案

【问题标题】：AngularJS add to browser history without page reload and without HTML5 pushstateAngularJS 添加到浏览器历史记录，无需重新加载页面，也无需 HTML5 推送状态
【发布时间】：2013-10-02 14:23:03
【问题描述】：

我有一个搜索页面，允许用户深入了解类别和/或输入搜索词。我想让用户能够使用后退按钮撤消这些操作。使用 AngularJS，我怎样才能让这个页面为这些操作中的每一个添加条目到浏览器历史记录中。我不能使用 HTML5 pushstate。

【问题讨论】：

标签： javascript angularjs browser-history

【解决方案1】：

您可以使用$locationProvider.html5Mode(false) 关闭 HTML5 模式。

然后只需使用像<a href="#!/search">Search</a> 这样的hashbang url，它们将被添加到浏览器的历史记录中。

【讨论】：

是否可以在不重新初始化控制器的情况下更改路由？

【解决方案2】：

我不相信不使用 HTML5 pushstate 就可以将条目添加到浏览器历史记录中（至少，不实际更改当前位置）。

MDN 页面讨论了 pushstate 的引入以及它如何启用这个新功能（暗示以前不可能）： https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

编辑：如果您不能使用 HTML5 pushstate 的原因是浏览器支持，请参阅以下 polyfill： https://github.com/browserstate/history.js

【讨论】：

【解决方案3】：

我发现我可以通过使用来自here 的关于 reloadOnSearch 的答案更改查询字符串参数而不重新加载页面来做到这一点：

$routeProvider
  .when('/items', {
    controller: 'ItemsCtrl',
    templateUrl: '/templates/items',
    reloadOnSearch: false
  },
  ...
);

然后，根据相同的答案，使用以下方法设置查询字符串：

$location.search('id', 123);

最后使用here的答案检测路线变化：

$scope.$on('$routeUpdate', function(){
  $scope.sort = $location.search().sort;
  $scope.order = $location.search().order;
  $scope.offset = $location.search().offset;
});

【讨论】：

正是我想要的。谢谢！
6 年后，仍然有帮助！我需要根据用户输入动态更新页面上的 url 参数。使用历史推送状态时的刷新让我发疯。谢谢:)

【解决方案4】：

与下面的 reloadOnSearch 代码一起跟踪位置更改事件对我有用。

$scope.$on('$locationChangeSuccess', function () {
      $scope.sort = $location.search().sort;
      $scope.order = $location.search().order;
      $scope.offset = $location.search().offset;
   });

虽然它可能对某人有所帮助。

【讨论】：