如何防止浏览器在浏览浏览器历史记录时卡在Angular路线上

How to prevent browser getting stuck on Angular route when navigating back through browser history

本文关键字：浏览器 Angular 记录 何防止 浏览 历史      更新时间：2024-05-31

我使用的是ui路由器和Angular 1.4.7。就上下文而言，当我在路线内向前（包括远离路线）或向后导航时，我所尝试的一切都有效，但当导航回不同的路线时，我从未尝试过。

在我被卡住的路线的控制器中，我使用$location.search（）更新我的路线参数，并使用$locationChangeSuccess在更改后启动一个函数。目前，如果我试图回到另一条路线，我最终会被困在路线上。我曾尝试使用$locationChangeStart和$locationChangeSuccess来检测我试图导航回的路由（通过切片newUrl和oldUrl参数），但它总是显示为当前路由（尽管如果我向前导航，这确实有效）。

更新：部分代码

// routeIGetStuckOn.js excerpt
$stateProvider
  .state('routeIGetStuckOn', {
    url: '/routeIGetStuckOn?optionalParams',
    reloadOnSearch: false,
    templateUrl: 'app/routes/routeIGetStuckOn/routeIGetStuckOn.html',
    controller: 'routeIGetStuckOnCtrl',
    controllerAs: 'vm'
  });
///////////////////////////////////////////////////////////////////////
// routeIGetStuckOn.controller.js excerpt
// When params in URL is updated, fire a function
$scope.$on('$locationChangeSuccess', function() {
 loadNewData();
});
//Use $location.search in various different functions with different types of new data
$location.search('optionalParams', newData);

更新：显示URL问题

我找到了一个解决方案，我将提交作为答案，以防其他人出现这种情况。这就是我正在阻止的：

  1. 从website.com/randomRoute开始
  2. 转到website.com/routeIGetStuckOn
  3. 点击website.com/routeIGetStuckOn?optionalParams=data时更新参数
  4. 尝试使用浏览器返回按钮返回到步骤2的website.com/routeIGetStuckOn，但最终返回到website.com/routeIGetStuckOn?optionalParams=。此时，无法按下后退按钮进入步骤1的website.com/randomRoute

通过添加以下代码，我可以保留浏览器历史记录并阻止导航到website.com/routeIGetStuckOn?optionalParams=，而不是按预期转到website.com/routeIGetStuckOn：

// Strip unused optional parameter on routeIGetStuckOn home page
$scope.$on('$locationChangeStart', function(event, next){
  if (next.slice(-1) === '=') {
    $location.url($location.path());
  }
});

它仍然感觉有点刺耳，但我一直没能找到更好的解决方案。

相关文章：