Guardias de Navegación en vue-router

Las guardias de navegación controlan transiciones entre rutas mediante redirecciones o cancelaciones. Se clasifican en tres tipos:

Parámetros de las Guardias

Todas las guardias reciben tres argumentos:

• destino: Objeto de ruta de destino
• origen: Ruta actual activa
• continuar: Función para resolver la transición

Guardias Globales

Se aplican a todas las transiciones:

const enrutador = new VueRouter({});

// Guardia previa global
enrutador.beforeEach((destino, origen, continuar) => {
  // Lógica de validación
});

// Guardia de resolución (v2.5+)
enrutador.beforeResolve((destino, origen, continuar) => {
  // Verificación final
});

// Hook posterior
enrutador.afterEach((destino, origen) => {
  // Acciones post-navegación
});

Guardia Específica de Ruta

const rutas = [
  {
    ruta: '/ejemplo',
    componente: ComponenteEjemplo,
    antesDeEntrar: (destino, origen, continuar) => {
      // Validación específica
    }
  }
];

Guardias en Componentes

export default {
  antesDeEntrarRuta(destino, origen, continuar) {
    continuar(vm => {
      // Accede a la instancia con `vm`
    });
  },
  
  antesDeActualizarRuta(destino, origen, continuar) {
    this.datos = destino.params.nuevosDatos;
    continuar();
  },
  
  antesDeSalirRuta(destino, origen, continuar) {
    if (!datosGuardados) {
      continuar(false); // Bloquea navegación
    } else {
      continuar();
    }
  }
};

Flujo de Resolución

1. Activación de navegación
2. Llamada a guardias de salida en componentes inactivos
3. Ejecución de beforeEach global
4. Activación de beforeRouteUpdate en componentes reutilizados
5. Ejecución de beforeEnter en rutas
6. Resolución de componentes asíncronos
7. Activación de beforeRouteEnter
8. Ejecución de beforeResolve global
9. Confirmación de navegación
10. Ejecución de afterEach global
11. Actualización de DOM
12. Callback de beforeRouteEnter

Obtención de Datos

Estrategias para cargar datos:

Post-navegación

export default {
  datos() {
    return {
      cargando: true,
      articulo: null
    };
  },
  creado() {
    this.obtenerDatos();
  },
  metodos: {
    async obtenerDatos() {
      try {
        const respuesta = await api.obtener(this.$route.params.id);
        this.articulo = respuesta;
      } catch (error) {
        console.error(error);
      } finally {
        this.cargando = false;
      }
    }
  }
};

Pre-navegación

export default {
  antesDeEntrarRuta(destino, origen, continuar) {
    api.obtener(destino.params.id, (err, datos) => {
      if (err) return continuar(false);
      continuar(vm => vm.establecerDatos(datos));
    });
  },
  metodos: {
    establecerDatos(datos) {
      this.articulo = datos;
    }
  }
};

Gestión de Estado con Vuex

Patrón cnetralizado para manejo de estado en aplicaciones Vue:

Configuración Básica

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  estado: { contador: 0 },
  mutaciones: {
    incrementar(estado) {
      estado.contador++;
    }
  },
  acciones: {
    incrementarAsync({ commit }) {
      setTimeout(() => commit('incrementar'), 1000);
    }
  }
});

Helpers

import { mapState, mapAcciones } from 'vuex';

export default {
  computed: {
    ...mapState(['contador']),
    ...mapGetters(['dobleContador'])
  },
  methods: {
    ...mapAcciones(['incrementarAsync'])
  }
};