Campos meta de rutas y tipado
meta: { requiresAuth: true }, fusión de declaraciones de TypeScript para tipar meta
Campos meta de rutas y tipado es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 1 de 4. 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 4 lecciones en total.
¿Qué son los campos meta de las rutas?
Cada ruta puede incluir un objeto meta: datos arbitrarios asociados a la ruta. Es perfecto para indicadores como requisitos de autenticación, roles permitidos, títulos de página o elecciones de diseño.
Añadir meta a una ruta
Establezca la clave meta en un registro de ruta. Los valores dependen completamente de usted.
const routes = [
{
path: '/dashboard',
component: Dashboard,
meta: { requiresAuth: true, roles: ['admin', 'editor'] }
}
]Leer meta en un guardia
El uso más habitual es en un guardia de navegación. router.beforeEach se ejecuta antes de cada navegación y recibe la ruta de destino, cuyo meta puede inspeccionar.
router.beforeEach((to, from) => {
if (to.meta.requiresAuth) {
// check login
}
})Redirigir a usuarios no autenticados
Devuelva una ubicación de ruta desde el guardia para redirigir. Devolver false cancela la navegación; no devolver nada o devolver true la permite.
router.beforeEach((to) => {
const auth = useAuthStore()
if (to.meta.requiresAuth && !auth.isLoggedIn) {
return { path: '/login' }
}
})Acceso basado en roles
Combine el campo meta roles con el rol del usuario actual para controlar el acceso a las páginas según los permisos.
router.beforeEach((to) => {
const auth = useAuthStore()
const roles = to.meta.roles
if (roles && !roles.includes(auth.role)) {
return { path: '/forbidden' }
}
})Meta se fusiona desde las rutas padre
Las rutas anidadas heredan meta de sus rutas padre mediante to.meta, que combina todos los registros coincidentes. Una ruta hija ve el meta de su padre, salvo que sobrescriba la misma clave.
El problema del tipado
De forma predeterminada, TypeScript define meta como un objeto vacío, por lo que to.meta.requiresAuth produce un error. Puede corregirlo mediante la fusión de declaraciones con los tipos de Vue Router.
Declarar meta con tipos
Amplíe la interfaz RouteMeta de vue-router. Colóquela en un archivo .d.ts o en cualquier módulo que contenga un export {}.
import 'vue-router'
declare module 'vue-router' {
interface RouteMeta {
requiresAuth?: boolean
roles?: string[]
}
}
export {}Ahora meta se comprueba mediante tipos
Después de la ampliación, el compilador conoce la estructura de meta. Detecta errores tipográficos como requireAuth y el autocompletado funciona.
router.beforeEach((to) => {
if (to.meta.requiresAuth) { /* typed as boolean | undefined */ }
})Usar meta en componentes
Dentro de un componente, puede leer el meta de la ruta actual mediante useRoute(), que también tiene tipos gracias a la ampliación.
import { useRoute } from 'vue-router'
const route = useRoute()
const secure = route.meta.requiresAuthMeta para títulos de página
Un patrón habitual consiste en guardar un title en meta y establecer document.title desde un guardia global.
router.afterEach((to) => {
if (to.meta.title) document.title = to.meta.title
})Comprobación rápida
Ponga a prueba sus conocimientos sobre el meta de las rutas y el tipado.
Resumen
Los campos meta de las rutas contienen datos específicos de cada ruta:
- Defina meta en los registros de ruta (requiresAuth, roles, title).
- Léalo en router.beforeEach para proteger la navegación.
- Meta se fusiona desde las rutas padre hasta las rutas hijas.
- Defina sus tipos mediante la fusión de declaraciones en RouteMeta de vue-router.
Preguntas frecuentes
¿La lección «Campos meta de rutas y tipado» es gratis?
Sí — el texto completo de «Campos meta de rutas y tipado» 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 4 lecciones en total.
¿Qué aprenderé en «Campos meta de rutas y tipado»?
meta: { requiresAuth: true }, fusión de declaraciones de TypeScript para tipar meta 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 1 de 4.
¿Cuánto tiempo toma la lección «Campos meta de rutas y tipado»?
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
- Campos meta de rutas y tipado
- Transiciones y animaciones de rutas
- Configuración del comportamiento de desplazamiento
- Navegación programática y useRouter