Vuejs: Show confirmation dialog before route change
VueJS has In Component Navigation Guards like beforeRouteUpdate
and beforeRouteLeave
beforeRouteEnter (to, from, next) {
// called before the route that renders this component is confirmed.
// does NOT have access to `this` component instance,
// because it has not been created yet when this guard is called!
},
...
beforeRouteLeave (to, from, next) {
// called when the route that renders this component is about to
// be navigated away from.
// has access to `this` component instance.
}
You can use In-Component Guards beforeRouteLeave
. See https://router.vuejs.org/en/advanced/navigation-guards.html .
Demo: https://codesandbox.io/s/jzr5nojn39 (try navigating between home, page 1, page 2)
Sample Code (using vuejs-dialog as the confirmation dialog):
beforeRouteLeave (to, from, next) {
this.$dialog.confirm('Do you want to proceed?')
.then(function () {
next();
})
.catch(function () {
next(false);
});
}
If it should proceed, use next()
.
If the redirection should be cancelled, use next(false)
.
The accepted answer shows how to do it by using vuejs-dialog. But if you don't want to use this library check below:
Say you have a dialog with 3 options:
close dialog => calls closeDialog()
and stays in the same page
save changes => calls saveChanges()
save changes and navigates away
discard changes => calls discardChanges()
navigates away without saving changes
data: () => ({
to: null,
showDialog: false
}),
beforeRouteLeave(to, from, next) {
if (this.to) {
next();
} else {
this.to = to;
this.showDialog = true;
}
},
methods: {
closeDialog() {
this.showDialog = false;
this.to = null;
},
saveChanges() {
// add code to save changes here
this.showDialog = false;
this.$router.push(this.to);
},
discardChanges() {
this.showDialog = false;
this.$router.push(this.to);
}
}
See it in action in codesandbox
Takeaway The key takeaway here is the beforeRouteLeave navigation guard, where we don't allow the user to navigate away if the to
property in data is null. The only case it cannot be null is when the user clicks save or discard button in the dialog.