带有Angularjs和UIRouter的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。

这是因为执行转换并且浏览器历史记录已更新后，$ stateChangeStart与$ locationChangeStart形成鲜明对比。

因此，它应该是这样的：

$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();   
    } 
});