web-dev-qa-db-fra.com

Comment avertir un utilisateur des modifications non enregistrées avant de quitter une page dans Vue

J'ai un UnsavedChangesModal en tant que composant qui doit être lancé lorsque l'utilisateur essaie de quitter la page alors qu'il a des modifications non enregistrées dans les champs de saisie (j'ai trois champs de saisie dans la page).

components: {
    UnsavedChangesModal
},
mounted() {
    window.onbeforeunload = '';
},
methods: {
   alertChanges() {

   }
}
javascriptvue.jsvuex
17
Bargain23

En supposant que vous utilisez vue-router (et vous devriez probablement l'être), alors vous voudrez utiliser la garde beforeRouteLeave. La documentation donne même un exemple de cette situation exacte:

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

Cela peut être ajouté directement sur votre composant:

components: { ... },
mounted: { ... }
methods: { ... },
beforeRouteLeave (to, from, next) { ... }
20
jpschroeder

Utilisez-vous vue-router? J'examinerais les gardes de navigation. Je les garde en tête, mais je ne les ai pas encore utilisés moi-même. Voici la documentation à leur sujet: https://router.vuejs.org/guide/advanced/navigation-guards.html

5
juan8a