useLeaveGuard
Предупреждает при закрытии вкладки или перезагрузке страницы, если в форме есть несохранённые изменения. Во время отправки и после успешного сохранения не мешает.
Сигнатура
ts
function useLeaveGuard(form: Form, options?: LeaveGuardOptions): () => void| Опция | Описание |
|---|---|
onBeforeRouteLeave | Функция onBeforeRouteLeave из vue-router — тогда предупреждение сработает и при переходах внутри приложения |
confirm | Своё окно подтверждения для переходов внутри приложения: (message) => boolean | Promise<boolean>. По умолчанию window.confirm |
message | Текст вопроса для переходов внутри приложения |
Возвращает функцию, которая снимает предупреждение при закрытии страницы. В компоненте вызывать её не нужно — обработчик снимается сам.
При закрытии вкладки браузер показывает своё стандартное сообщение — его текст изменить нельзя.
Пример
ts
import { onBeforeRouteLeave } from 'vue-router';
useLeaveGuard(form, {
onBeforeRouteLeave,
confirm: (message) => dialog.confirm({ title: message }), // e.g. a UI library dialog returning Promise<boolean>
message: 'Leave without saving?',
});