使用 onBeforeUnload 会破坏 Angular 中的浏览器历史

Question

当用户在页面上完成输入数据后，我希望他们返回上一页（例如主页 -> 输入页面）。如果我在他们单击提交时重定向他们，我将得到一个循环历史记录（主页 -> 输入页面 -> 主页）。因此，当用户点击提交时，我调用window.history.back()。

为了防止数据丢失，我监听了 beforeUnload 事件。如果用户尚未提交表单，我会提示确保他们知道他们将丢失所做的更改。

我遇到的问题是，如果用户尝试返回而不提交数据，请单击取消以留在页面上，然后单击提交。他们第一次回击被取消，然后在提交后我执行 history.back()，但这最终会返回历史记录中的 2 个条目而不是 1 个。几乎就像当我取消返回事件时，前一个 URL （主页）一起从历史堆栈中删除。因此，点击提交会越过该页面并返回到新标签页。

我知道堆栈管理非常困难，但如果用户取消 onBeforeUnload 以留在页面上并且点击提交，则无法弄清楚如何转到上一个 URL。似乎如果用户取消它，当我调用 history.back() 它应该回到主页。

Answer 1

我发现我的问题与 Angular 有关，我在问题中没有提及。出现Angular navigation gets screwed up when a CanDeactivate guard cancels a navigation。有一个建议的解决方法似乎对我有用。