javascript - 使用 Angularjs 和 UI Router 的 event.preventDefault() 删除浏览器历史记录

Question

当用户通过观察 $stateChangeStart 事件单击浏览器 Back 按钮时，我会显示 Javascript Confirm 提示。请考虑以下事项:

用户从第 1、2 页导航，然后是第 3 页。在第 3 页上，用户单击 Back 按钮，他们会看到一个确认框。用户点击 Cancel 按钮，执行 event.preventDefault() 并且用户停留在同一页面上。然后，如果用户再次单击 Back，并第二次选择 OK，用户将返回到页面 1。页面 2 发生了什么？ event.preventDefault() 是否删除了最后的历史记录？如何防止浏览器跳过上一页？

$rootScope.$on('$stateChangeStart',
    function (event, toState, toParams, fromState, fromParams) {
        var retVal = confirm("You have unsaved changes. If you leave the page, these changes will be lost.");
        if (retVal == false) {
            // user wants to cancel navigating back. 
            event.preventDefault();         
        }
    });

Answer 1

如果您想在防止点击后退按钮的同时保留历史记录，您必须观察 $locationChangeStart 事件而不是 $stateChangeStart。

这是因为与 $locationChangeStart 相比，$stateChangeStart 是在执行转换并且浏览器历史记录已更新后进行广播。

所以它应该是这样的:

$rootScope.$on('$locationChangeStart', function(event, next) {
    var retVal = confirm("You have unsaved changes. If you leave the page, these changes will be lost.");
    if (retVal == false) {
        // user wants to cancel navigating back. 
        event.preventDefault();         
    }
});