Есть ли в SvelteKit способ отменить событие popstate, если пользовательское состояние не сохранено?
У меня есть компонент, который позволяет пользователю редактировать свое состояние. Это запускает переменную notSaved. У меня есть обработчик событий beforeunload для обработки перезагрузки и выхода со страницы, чтобы напомнить пользователю о сохранении своего состояния, но с помощью SvelteKit использование кнопки «Назад» в браузере, похоже, не вызывает событие beforeunload. У меня также есть обработчик события popstate, потому что он срабатывает при нажатии кнопки «Назад», но я не могу понять, как предотвратить изменение window.history, если переменная notSaved имеет значение true.
Есть ли в SvelteKit способ вызвать всплывающее окно Changes you made may not be saved., подобное тому, которое запускается при событии beforeunload при нажатии кнопки «назад» или «вперед»?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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}>
beforeNavigate/afterNavigate был добавлен в версию 227. Если вы получаете сообщение об ошибке, связанное с отсутствием функции beforeNavigate, проверьте свою версию и убедитесь, что вы не используете более старую версию SvelteKit.