web-dev-qa-db-fra.com

Vuejs: Afficher la boîte de dialogue de confirmation avant le changement d'itinéraire

Dans mon projet vueJS, je veux afficher la boîte de dialogue de confirmation avant que l'itinéraire actuel ne change. enter image description here

Si oui, il doit rediriger vers le prochain itinéraire souhaité, sinon conservez-le sur le même itinéraire.

Une idée de comment y parvenir?

Merci d'avance.

javascriptvue.jsvuejs2vue-componentvue-router
9
Sagar Kharche

Vous pouvez utiliser les gardes en composantes beforeRouteLeave. Voir https://router.vuejs.org/en/advanced/navigation-guards.html .

Démo: https://codesandbox.io/s/jzr5nojn39 (essayez de naviguer entre la maison, page 1, page 2)

Exemple de code (en utilisant vuejs-dialog comme boîte de dialogue de confirmation):

    beforeRouteLeave (to, from, next) {
        this.$dialog.confirm('Do you want to proceed?')
        .then(function () {
            next();
        })
        .catch(function () {
            next(false);
        });
    }

Si cela devait continuer, utilisez next().

Si la redirection doit être annulée, utilisez next(false).

20
Jacob Goh

La réponse acceptée montre comment le faire en utilisant vuejs-dialog . Mais si vous ne souhaitez pas utiliser cette bibliothèque, vérifiez ci-dessous:

Supposons que vous ayez une boîte de dialogue avec 3 options:

fermer la boîte de dialogue => appelle closeDialog() et reste sur la même page

enregistrer les modifications => appelle saveChanges() enregistrer les modifications et s'éloigne

annuler les modifications => appelle discardChanges() s'éloigne sans enregistrer les modifications

  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);
    }
  }

Voir en action dans codesandbox

À emporter La clé à retenir ici est le beforeRouteLeave garde de navigation, où nous n'autorisons pas l'utilisateur à s'éloigner si le to la propriété dans les données est nulle. Le seul cas où il ne peut pas être nul est lorsque l'utilisateur clique sur le bouton Enregistrer ou supprimer dans la boîte de dialogue.

2
roli roli

VueJS a dans les gardes de navigation des composants comme beforeRouteUpdate et 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.
}
2
Nafiul Islam

Le code suivant fonctionne pour moi

 <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>
0
Atchutha rama reddy Karri