Question

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

用户从第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();         
    }
});

使用Angularjs和UIRouter的event.preventDefault（）删除浏览器历史记录

1 个答案: