Guardas de navegación
Proteja rutas y ejecute lógica durante la navegación mediante guardas
Guardas de navegación es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 3 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 3 lecciones en total.
¿Qué son las guardas de navegación?
Las guardas de navegación permiten ejecutar código antes, durante o después de un cambio de ruta.
- Bloquear o redirigir la navegación
- Comprobar la autenticación
- Solicitar confirmación antes de salir de una página
Tipos de guardas
Hay tres niveles de guardas:
- Las guardas globales se ejecutan en cada navegación
- Las guardas por ruta se ejecutan para una ruta específica
- Las guardas en componentes se ejecutan dentro de un componente
La guarda global beforeEach
router.beforeEach se ejecuta antes de cada navegación. Recibe las rutas de destino y actual.
router.beforeEach((to, from) => {
console.log("going to", to.path)
// return true to allow,
// or a route to redirect
})Permitir o redirigir
En Vue Router 4, devuelva un valor para controlar el flujo.
- Devuelva true o no devuelva nada para permitir la navegación
- Devuelva false para cancelarla
- Devuelva una ubicación de ruta para redirigir
router.beforeEach((to) => {
if (to.meta.requiresAuth && !isLoggedIn()) {
return { name: "login" }
}
return true
})Campos meta de las rutas
Asocie datos meta personalizados a las rutas, como requiresAuth, y léalos en las guardas.
const routes = [
{
path: "/dashboard",
component: Dashboard,
meta: { requiresAuth: true }
}
]Una guarda de autenticación
Un patrón habitual consiste en proteger las rutas comprobando la autenticación en una guarda global.
router.beforeEach((to) => {
const authed = localStorage.getItem("token")
if (to.meta.requiresAuth && !authed) {
return { name: "login", query: { redirect: to.fullPath } }
}
})beforeEnter por ruta
beforeEnter protege una sola ruta directamente en su definición.
const routes = [
{
path: "/admin",
component: Admin,
beforeEnter: (to, from) => {
return isAdmin() ? true : { name: "home" }
}
}
]Guardas en componentes
Los componentes pueden definir sus propias guardas. onBeforeRouteLeave se ejecuta al navegar fuera del componente.
import { onBeforeRouteLeave } from "vue-router"
onBeforeRouteLeave((to, from) => {
if (hasUnsavedChanges.value) {
return window.confirm("Leave without saving?")
}
})onBeforeRouteUpdate
onBeforeRouteUpdate se ejecuta cuando cambia la ruta, pero se reutiliza el mismo componente, por ejemplo, al cambiar un parámetro.
import { onBeforeRouteUpdate } from "vue-router"
onBeforeRouteUpdate((to) => {
loadUser(to.params.id)
})La callback next (estilo clásico)
El código antiguo utiliza un tercer argumento, next, para controlar la navegación. Actualmente se prefiere devolver un valor.
// Classic style with next()
router.beforeEach((to, from, next) => {
if (canAccess(to)) {
next() // proceed
} else {
next("/login") // redirect
}
})Valor devuelto frente a next()
Dos estilos con el mismo objetivo:
- Devolver un valor (moderno y más claro): true, false o una ubicación
- Llamar a next() (clásico): continuar o redirigir
No los mezcle en la misma guarda. Se recomienda el estilo basado en valores devueltos para el código nuevo.
Comprobación rápida
Compruebe su comprensión de las guardas de navegación.
Resumen: guardas de navegación
Ha aprendido a controlar la navegación:
- La guarda global beforeEach se ejecuta para cada ruta
- Devuelva true para permitir, false para cancelar o una ubicación para redirigir
- Los campos meta, como requiresAuth, controlan las comprobaciones de autenticación
- beforeEnter protege una sola ruta
- Las guardas en componentes, como onBeforeRouteLeave, gestionan la salida
¡Ha completado el curso fundamental de Vue.js!
Aprende HTML con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 42
- Lecciones
- 156
Preguntas frecuentes
¿La lección «Guardas de navegación» es gratis?
Sí — el texto completo de «Guardas de navegación» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 3 lecciones en total.
¿Qué aprenderé en «Guardas de navegación»?
Proteja rutas y ejecute lógica durante la navegación mediante guardas Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Vue Academy?
No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 3.
¿Cuánto tiempo toma la lección «Guardas de navegación»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Vue Academy?
Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Configuración de Vue Router
- Rutas anidadas y dinámicas
- Guardas de navegación