Tengo un componente que permite a un usuario editar su estado. Esto desencadena una variable notSaved . Tengo un controlador de eventos beforeunload para manejar la recarga y salir de la página para recordarle al usuario que guarde su estado, pero al usar SvelteKit, usar el botón Atrás en el navegador no parece activar el evento beforeunload . También tengo un controlador de eventos popstate , porque se activa cuando se hace clic en el botón Atrás, pero no sé cómo evitar que cambie el historial de notSaved window.history verdadera.
¿Hay alguna forma en SvelteKit de activar un Changes you made may not be saved. ventana emergente similar a la que se activa en un evento beforeunload cuando se presiona el botón de retroceso o avance?
Puede usar la función beforeNavigate para recibir una notificación de un intento de navegación con el fin de bloquearlo potencialmente, por ejemplo:
<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}>