La navegación programática se refiere a la capacidad de cambiar de ruta mediante código en lugar de hacer clic en un enlace <router-link>.
Esto es muy útil en algunas circustancias. Por ejemplo, cuando necesitamos redirigir al usuario después de ciertas acciones (como un inicio de sesión exitoso o la validación de un formulario).
Métodos de navegación programática
Vue Router proporciona varios métodos para realizar la navegación programática:
| Método | Descripción |
|---|---|
router.push() | Navega a una nueva ruta y agrega una entrada en el historial del navegador. |
router.replace() | Similar a push, pero no agrega una nueva entrada en el historial. |
router.go() | Navega hacia adelante o hacia atrás en el historial (similar al historial nativo del navegador). |
// En un método de un componente
methods: {
redirectToHome() {
this.$router.push('/home');
}
}Este código redirige al usuario a la ruta /home cuando se llama al método redirectToHome.
// En un método de un componente
methods: {
replaceCurrentRoute() {
this.$router.replace('/new-route');
}
}Este código reemplaza la ruta actual por /new-route sin agregar una nueva entrada en el historial.
// En un método de un componente
methods: {
goBack() {
this.$router.go(-1); // Navega hacia atrás en el historial
}
}Este código navega hacia atrás en el historial del navegador.
Guards de ruta
Los guards de ruta son funciones que se ejecutan antes, durante o después de la navegación. Son útiles para controlar el acceso a rutas específicas, como la autenticación.
Vue Router ofrece varios tipos de guards:
| Tipo | Alcance |
|---|---|
| Global guards | Todas las rutas |
| Per-route guards | Rutas específicas |
| In-component guards | Componentes individuales |
Los global guards se definen en la instancia del router y afectan a todas las rutas. Los más comunes son:
beforeEach: Se ejecuta antes de cada navegación.beforeResolve: Se ejecuta después de que todos los guards de componentes y async components hayan sido resueltos.afterEach: Se ejecuta después de cada navegación.
const router = new VueRouter({
routes: [
// Definición de rutas
]
});
router.beforeEach((to, from, next) => {
const isAuthenticated = checkAuth(); // Función que verifica la autenticación
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login'); // Redirige al login si no está autenticado
} else {
next(); // Continúa con la navegación
}
});Este código verifica si el usuario está autenticado antes de permitir el acceso a rutas que requieren autenticación.
Los per-route guards se definen directamente en la configuración de una ruta específica. Los más comunes son:
beforeEnter: Se ejecuta antes de entrar a la ruta.
const router = new VueRouter({
routes: [
{
path: '/dashboard',
component: Dashboard,
beforeEnter: (to, from, next) => {
const isAdmin = checkAdmin(); // Función que verifica si el usuario es admin
if (!isAdmin) {
next('/unauthorized'); // Redirige si no es admin
} else {
next(); // Continúa con la navegación
}
}
}
]
});Este código verifica si el usuario es administrador antes de permitir el acceso a la ruta /dashboard.
Los in-component guards se definen dentro de los componentes y permiten un control más granular. Los más comunes son:
beforeRouteEnter: Se ejecuta antes de que el componente sea montado.beforeRouteUpdate: Se ejecuta cuando la ruta cambia pero el componente se reutiliza.beforeRouteLeave: Se ejecuta antes de abandonar el componente.
export default {
name: 'EditProfile',
beforeRouteLeave(to, from, next) {
if (this.unsavedChanges) {
const confirmLeave = confirm('Tienes cambios sin guardar. ¿Seguro que quieres salir?');
if (confirmLeave) {
next(); // Continúa con la navegación
} else {
next(false); // Cancela la navegación
}
} else {
next(); // Continúa con la navegación
}
}
};Este código muestra un mensaje de confirmación si el usuario intenta abandonar la página con cambios sin guardar.