Предупреждение о несохраненных изменениях в Vue Js
Я пытаюсь предупредить клиента о несохраненных изменениях в перехватчике маршрута beforeRouteLeave (to, from, next) одного из моих компонентов Vue. Я хочу отображать следующую подсказку при навигации или перезагрузке:
Я пытаюсь использовать событие window.onbeforeunload, но не запускается должным образом:
beforeRouteLeave (to, from, next) {
if (!this.changesSaved) {
const answer = window.onbeforeunload = function(e) {
return 'Do you really want to leave? you have unsaved changes!';
};
if (answer) {
return next()
} else {
return next(false)
}
}
return next()
}
Что я здесь синтаксически не так делаю?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вероятно, это потому, что windowunload не используется, так как окно никогда не выгружается ?? На самом деле я не уверен. Но, судя по тому, как работает Vue, я предполагаю, что именно поэтому.
Так может просто использовать подтверждение?
beforeRouteLeave (to, from, next) {
if (!this.changesSaved) {
const answer = window.confirm = function(e) {
return 'Do you really want to leave? you have unsaved changes!';
};
if (answer) {
return next()
} else {
return next(false)
}
}
return next()
}
Вероятно, вы используете перехватчик beforeRouterLeave в дочернем компоненте вашего компонента маршрута. Таким образом, вы должны активировать этот хук напрямую в своем компоненте маршрута.
Finally, you can directly define route navigation guards inside route components (the ones passed to the router configuration) with the following options...
Вот ссылка
это не срабатывает, когда страница, к сожалению, перезагружается :(