Vuejs: Mostrar diálogo de confirmación antes del cambio de ruta

Hola, hemos encontrado la respuesta a tu búsqueda, continúa leyendo y la verás a continuación.

Solución:

Puedes usar Guardias en componentesbeforeRouteLeave. Consulte https://router.vuejs.org/en/advanced/navigation-guards.html.

Demostración: https://codesandbox.io/s/jzr5nojn39 (intente navegar entre inicio, página 1, página 2)

Código de muestra (usando vuejs-dialog como diálogo de confirmación):

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

Si debe proceder, use next().

Si se debe cancelar la redirección, utilice next(false).

La respuesta aceptada muestra cómo hacerlo usando vuejs-dialog. Pero si no desea utilizar esta biblioteca, consulte a continuación:

Digamos que tiene un diálogo con 3 opciones:

cerrar diálogo => llamadas closeDialog() y se queda en la misma página

guardar cambios => llamadas saveChanges() guarda los cambios y navega lejos

descartar los cambios => llamadas discardChanges()navega lejos sin guardar los cambios

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

Véalo en acción en codesandbox

Quitar los key La conclusión aquí es el protector de navegación beforeRouteLeave, donde no permitimos que el usuario navegue si el to la propiedad en los datos es null. El unico caso no puede ser null es cuando el usuario hace clic en el botón Guardar o descartar en el cuadro de diálogo.

VueJS tiene En protectores de navegación de componentes me gusta beforeRouteUpdate y 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.

Sección de Reseñas y Valoraciones

Si haces scroll puedes encontrar las referencias de otros desarrolladores, tú además eres capaz dejar el tuyo si te apetece.

---

---

Utiliza Nuestro Buscador