CODEWITHSUNDEEP
vue.jsvuejs2vue-componentvue-routervuex
Rohanil
Rohanil

Reputation: 1887

Stop destroying vue.js component because there are unsaved changes

I am using Vue.js. I have a component where the user can save data. But it is possible that user has not saved the data and he tries to navigate to other route or destroy the component. I want to show a message that there is unsaved data and user really wants to leave it unsaved.

If the user says that he does not want to leave the unsaved data, then I have to stop navigation or component's destroying. I am using beforeDestroy to check if there is unsaved data and it works but I can not stop destroying the component or navigation. I tried using beforeRouteLeave but it does not work. Any ideas on how to make this work?

Upvotes: 1

Views: 2332

Answers (1)

Hardik Satasiya
Hardik Satasiya

Reputation: 9693

Hmm I see, are you sure using beforeRouteLeave in this manner

beforeRouteLeave (to, from , next) {
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (answer) {
    next()
  } else {
    next(false)
  }
}

key is next(false)

you need to pass false as argument in next() so it will not forward to next route.

just need to check if its correctly used.

Upvotes: 1

Related Questions