在SvelteKit中，如果用户状态未保存，有没有办法取消popstate事件？

Question

我有一个允许用户编辑其状态的组件。这将触发一个notSaved变量。我有一个beforeunload事件处理程序来处理重新加载和退出页面，以提醒用户保存他们的状态，但使用SvelteKit，在浏览器中使用后退按钮似乎不会触发beforeunload事件。我也有一个popstate事件处理程序，因为当单击后退按钮时触发，但我无法弄清楚如何防止window.history改变，如果notSaved变量为真。

在SvelteKit中是否有一种方法可以触发Changes you made may not be saved.弹出类似于按下后退或前进按钮时触发的beforeunload事件?

Answer 1

您可以使用beforeNavigate函数来通知导航意图，以便潜在地阻止它，例如:

<script>
import { beforeNavigate } from '$app/navigation';
let unsavedWork = false;
let value = 0;
beforeNavigate(({ from, to, cancel }) => {
if (unsaved) {
cancel();
showUnsavedWorkPopup();
}
});
function onChange() {
...
unsavedWork = true;
}
async function save() {
await ...
unsavedWork = false;
}
</script>
<input type="number" bind:value on:change={onChange}>