Svelte 如何捕获浏览器后退按钮或卸载？答案

【问题标题】：Svelte How to trap browser back button or unload?Svelte 如何捕获浏览器后退按钮或卸载？
【发布时间】：2020-07-29 20:22:36
【问题描述】：

我想在我的 Svelte SPA 应用中完全控制导航。

有没有办法捕获后退、前进和刷新按钮，以便我可以在丢失页面时发出警告？

【问题讨论】：

有，但不是很可定制，我认为所有主要浏览器都禁用了提供自定义消息的能力，但它们都说“你确定吗？你有未保存的更改”。您需要的是在卸载之前，您可以从 svelte:window 标记中运行它，如 answer 所示
这能回答你的问题吗？ How to Detect Browser Back Button event - Cross Browser
你在使用 Sapper 吗？或svelte-routing？你用的是哪个路由库？

标签： svelte onbeforeunload svelte-component

【解决方案1】：

假设您没有使用 Sapper 或第三方 Svelte 路由库，您可以按照 cmets 中的建议使用 beforeunload 来实现。这是一个带有 TypeScript 的 sn-p。

<script lang="ts">
    export let name: string;

    function beforeunload(event: BeforeUnloadEvent) {
        event.preventDefault();
        return event.returnValue = '';
    }
</script>

<p>{name}</p>

<svelte:window on:beforeunload={beforeunload}/>

on:beforeunload 可能会引发类型错误，但应该可以正常工作。

【讨论】：