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.