Vuejs: Show confirmation dialog before route change

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

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

Any idea how to achieve it?

Thanks in advance.

Answers:

Answer

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

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

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

The following code works for me

 <v-btn @click="deleteDialog = true">Delete</v-btn>
      <v-dialog v-model="deleteDialog" max-width="500px">
       <v-card>
               <v-card-title style="font-size:20px" >Are you sure you want to archive?</v-card-title>
               <v-card-actions>
                   <v-spacer></v-spacer>
                   <v-btn color="red" style="font-size:15px" flat @click.native="deleteDialog = false">No</v-btn>
                   <v-btn color="green" style="font-size:15px" flat @click.native="deleteItem">Yes</v-btn>
               </v-card-actions>
           </v-card>
       </v-dialog>

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.