Question

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

Answer 1

我发现我可以通过使用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;
});

Answer 2

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

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

Answer 3

我不相信可以在不使用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

Answer 4

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

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

虽然这对某人有帮助。

AngularJS添加到浏览器历史记录，无需重新加载页面，也没有HTML5 pushstate

4 个答案: