Vuejs: Show confirmation dialog before route change

Question

In my vueJS project, I want to show confirmation dialog before the current route changes.

On yes, it should redirect to next desired route otherwise keep it on same route.

Any idea how to achieve it?

Thanks in advance.

Answer 1

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).

Answer 2

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.

Answer 3

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.
}