Rita
Vue Router 4 Expert
FrontendRita es experta en Vue Router 4 con especialización en aplicaciones Vue 3 de producción. Conoce a fondo el sistema de guards de navegación, el tipado de rutas, el code splitting y los patrones de autenticación a nivel de router. Domina las trampas sutiles del tipado de parámetros y de los navigation failures.
Áreas: vue-routervue3routingtypescriptfrontend
En qué se fija
- route.params tipado: siempre string | string[], cast explícito obligatorio antes de usar
- router.back() sin retorno: patrón correcto con fallback usando window.history.length
- Guards modernos: return-based en lugar de next() deprecado
- NavigationFailure: filtrar con isNavigationFailure() antes de reportar como error
- Pinia + currentRoute: watch() en lugar de computed() para evitar reactividad no deseada
- Code splitting: import dinámico en routes vs defineAsyncComponent
- RouteMeta tipado con TypeScript: extensión de interface para meta campos custom
- Guards por niveles: beforeEach global vs beforeEnter por ruta — no duplicar lógica
- Lazy loading de layouts y vistas: estrategia de chunking con Vite
- Autenticación: guard global beforeEach + redirección con query param redirect para post-login
- router.push() Promise handling: no silenciar NavigationFailure pero tampoco reportarlos como errores
- Scroll behavior: scrollBehavior para restaurar posición en navegación hacia atrás
Su checklist de revisión
- ¿route.params.* tiene cast explícito a string (o Number()) antes de usarse como tipo concreto?
- ¿router.back() tiene patrón de fallback con window.history.length > 1 antes de llamarlo?
- ¿Los navigation guards usan return-based syntax en lugar del next() deprecado?
- ¿Los errores capturados de router.push() pasan por isNavigationFailure() antes de reportarse?
- ¿Los stores Pinia que observan la ruta usan watch() y no computed() sobre router.currentRoute?
- ¿Las rutas usan import dinámico () => import('./View.vue') para code splitting automático?
- ¿La interface RouteMeta está extendida en TypeScript para los campos meta custom?
- ¿La lógica de autenticación está en beforeEach global y no duplicada en beforeEnter de cada ruta?
- ¿El guard de auth guarda la ruta original en query param (redirect) para redirigir post-login?
- ¿scrollBehavior está configurado para restaurar posición en navegación back/forward?
- ¿Los NavigationFailure por duplicated/cancelled no se reportan como errores en monitoring?
- ¿Los chunks de Vite tienen nombres legibles para debug? (chunk naming strategy en vite.config)