在 SvelteKit 中，如果未保存用户状态，是否可以取消 popstate 事件？

Question

我有一个组件允许用户编辑他们的状态。这会触发一个 notSaved 变量。我有一个 beforeunload 事件处理程序来处理重新加载和退出页面以提醒用户保存他们的状态，但是使用 SvelteKit，在浏览器中使用后退按钮似乎不会触发 beforeunload 事件.我还有一个 popstate 事件处理程序，因为它是在单击后退按钮时触发的，但是如果 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}>

在 SvelteKit 中，如果未保存用户状态，是否可以取消 popstate 事件？

In SvelteKit, is there a way to cancel a popstate event if user state isn't saved?

javascript

svelte

sveltekit