To prevent users from unintentionally leaving an unsaved form, I am looking to implement a custom modal alert system with vue-router.
Although the use of the standard browser alert box is an option,
beforeRouteLeave (to, from, next) {
const answer = window.confirm('Do you really want to leave? You have unsaved changes!')
if (answer) {
next();
} else {
next(false);
}
}
I am interested in how I can synchronize this functionality with a custom child modal component's event:
async beforeRouteLeave(to, from, next) {
const response = await this.showModal();
if (response) {
next();
} else {
next(false);
}
}