Question

我正在使用ui-router和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);

更新：显示网址问题

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

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

Answer 1

我已经能够保留浏览器历史记录并阻止导航到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());
  }
});

它仍然感觉有点笨拙，但我找不到更好的解决方案。

如何在浏览器历史记录中导航时阻止浏览器卡在Angular路由上

1 个答案: