我有一个包含多个步骤的向导。让我们这样说：
Product > Address > Payment > Verify
在/verify 步骤中，用户购买了一些东西。如果用户现在按下浏览器上的后退按钮，他应该转到/product 步骤而不是/payment 步骤。为此，我想将浏览器历史记录从/payment 更改为/product，以便他可以购买更多东西。
我使用启用了 HTML5 模式的 angularjs 1.3.14 和 ui-router 0.2.10。因此，该解决方案可能会使用 HTML5 历史记录。但如果它也适用于旧版浏览器，那就太好了。但是支持很不错。
【问题讨论】：
标签： angularjs html angular-ui-router
我知道这是旧的但为了帮助别人，我所做的是在调用.path() 之前调用.replace() 来设置后退按钮的位置。所以在你的情况下，我会这样做：
// some code in Payment controller...
// call .replace() to set the history to '/product'
$location.replace('/product');
// now change .path()
$location.path('/verify');
现在在/verify 路由上，如果用户按下浏览器的back 按钮，它应该将他们带到/product 路由而不是/payment。
要提一提的是，我不知道这是否适用于旧版浏览器，但我可以确认它适用于 Chrome 66.0.3359.181 和 Safari 11.1
【讨论】：
stackg91 的答案给了我正确的想法。由于我不想更改页面以在下一刻重新更改它，我在$stateChangeStart 上收听。所以我做了这样的事情（伪代码）
obj.finishedStateListener = $rootScope.$on('$stateChangeStart', function (event, toState) {
if(statechange inside wizard) {
event.preventDefault();
obj.finishedStateListener();
$state.go(initState);
}
})
保存$on 函数的返回非常重要，因为它使您可以取消注册事件监听器。如果您忘记调用它，您将在无限循环中结束。
【讨论】：
在 HTML5 中，您可以使用历史对象进行操作：https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history
其实你可以只修改最后一条，有两种选择：
pushState() - 在历史末尾添加一个新状态replateState() - 用新条目更改最后一个条目它被很好地支持http://caniuse.com/#feat=history，但要小心旧的IE。
别忘了使用 fallback 作为：
if (history.pushState) {
// your code with history manipulation
} else {
// your fallback code for older IE and others
}
【讨论】：
好吧，基本上你可以为此使用States
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
// setup an abstract state for the tabs directive
.state('product', {
url: "/product",
templateUrl: "templates/product.html",
controller: "productCtrl"
})
.state('Address', {
url: "/Address",
templateUrl: "templates/Address.html",
controller: "AddressCtrl"
})
.state('Payment', {
url: "/Payment",
templateUrl: "templates/Payment.html",
controller: "PaymentCtrl"
})
.state('Verify', {
url: "/Verify",
templateUrl: "templates/Verify.html",
controller: "VerifyCtrl"
})
});
在您的主控制器中，您可以观察状态变化
$rootScope.$on('$stateChangeSuccess', function (ev, to, toParams, from, fromParams) {
if(from.name == 'verify' && to.name == 'payment'){
$state.go('product')
redirect example
}
});
别忘了注入 $state！
【讨论】：