vue-router-best-practices

Visión general de la skill vue-router-best-practices

Para qué sirve vue-router-best-practices

La skill vue-router-best-practices es una guía concreta de implementación y resolución de problemas para Vue Router 4, especialmente en torno a navigation guards, cambios en route params y el comportamiento del ciclo de vida de los componentes asociados a rutas. Resulta más útil cuando tu app ya usa Vue 3 + Vue Router y necesitas aplicar patrones correctos con rapidez, no consejos genéricos sobre el framework.

Quién debería instalar esta skill

Esta skill encaja bien para desarrolladores frontend que estén:

• desplegando rutas autenticadas o protegidas por permisos
• depurando datos obsoletos cuando solo cambian los route params
• migrando código antiguo de guards que aún usa next()
• intentando evitar bucles de redirección y fallos silenciosos de routing

Si tu trabajo real es “hacer que el routing sea seguro y predecible en producción”, esta skill te va a servir mejor que un prompt amplio sobre Vue.

Por qué esta skill es distinta de un prompt genérico

El valor de vue-router-best-practices está en que se centra en un conjunto pequeño de errores frecuentes de Vue Router con mucho impacto y que rompen apps reales una y otra vez:

• beforeEnter no se ejecuta en actualizaciones de params o query
• beforeRouteEnter no tiene acceso a this
• lógica async en guards que en realidad no bloquea la navegación
• redirecciones infinitas en guards globales
• estado obsoleto del componente cuando cambian los route params
• patrones antiguos con next() en Vue Router 4

Por eso esta skill es especialmente útil para corregir bugs, revisar código y hacer migraciones.

Lo que no pretende cubrir

No es un curso completo de Vue Router, ni una referencia exhaustiva de su API, ni una guía de arquitectura para todos los modos del router. La skill es deliberadamente acotada: está pensada para ayudarte con problemas prácticos de corrección que afectan al comportamiento real de la navegación.

Cómo usar la skill vue-router-best-practices

Contexto de instalación de vue-router-best-practices

Usa vue-router-best-practices dentro de un flujo de trabajo de programación con IA en el que el modelo pueda inspeccionar tu configuración del router, tus componentes de ruta y la lógica de tus guards. La skill está en skills/vue-router-best-practices dentro del repositorio vuejs-ai/skills:

• SKILL.md
• reference/router-beforeenter-no-param-trigger.md
• reference/router-beforerouteenter-no-this.md
• reference/router-guard-async-await-pattern.md
• reference/router-navigation-guard-infinite-loop.md
• reference/router-navigation-guard-next-deprecated.md
• reference/router-param-change-no-lifecycle.md
• reference/router-simple-routing-cleanup.md
• reference/router-use-vue-router-for-production.md

Si tu plataforma permite instalar skills, usa su flujo habitual de add/import para el repositorio y luego apunta a vue-router-best-practices.

Lee primero estos archivos antes de escribir el prompt

Para entenderla lo más rápido posible, léelos en este orden:

1. SKILL.md
2. reference/router-navigation-guard-next-deprecated.md
3. reference/router-navigation-guard-infinite-loop.md
4. reference/router-param-change-no-lifecycle.md
5. reference/router-beforeenter-no-param-trigger.md

Este orden saca primero a la luz los errores de mayor riesgo: flujo de control roto en guards, bucles de redirección y datos obsoletos impulsados por la ruta.

Qué información necesita la skill

La vue-router-best-practices skill funciona mejor cuando le das código de routing concreto, no solo un síntoma. Buenos inputs incluyen:

• router/index.ts o router.ts
• route records con meta
• guards globales como beforeEach
• guards dentro del componente
• componentes renderizados por rutas dinámicas como /users/:id
• una reproducción breve de lo que la navegación debería hacer frente a lo que hace ahora

Sin código, la respuesta será más genérica y menos fiable.

Cómo convertir un problema difuso en un prompt sólido

Prompt débil:

• “My Vue Router is buggy. Help.”

Prompt sólido:

• “Use vue-router-best-practices to review this Vue Router 4 setup. When navigating from /orders/1 to /orders/2, access checks do not rerun and stale order data remains visible. We use a route-level beforeEnter, an async beforeEach, and onMounted in OrderDetail.vue. Identify the bug sources, explain which Vue Router behaviors are causing them, and rewrite the guards and component logic using Vue Router 4 return-based patterns.”

Esa versión le da al modelo suficiente estructura para aplicar el archivo de referencia correcto y proponer una solución realmente utilizable.

Flujo de trabajo recomendado para usar vue-router-best-practices

Un flujo práctico:

1. Pega la configuración de rutas que falla y el código de los guards.
2. Describe la ruta exacta de navegación que falla.
3. Pide al modelo que relacione tu problema con uno de los errores conocidos.
4. Solicita una implementación corregida.
5. Pide una checklist breve de pruebas que cubra acceso directo, cambios de params en la misma ruta, redirecciones y acceso no autorizado.

Este flujo funciona mejor que pedir “best practices” en abstracto, porque la mayoría de los bugs de Vue Router dependen del escenario concreto.

Casos de uso en los que esta skill destaca más

Los mejores casos de vue-router-best-practices usage son:

• routing con autenticación y roles
• páginas de detalle impulsadas por route params
• limpieza de migraciones de Vue Router 3 a 4
• depuración de instancias de componentes reutilizadas
• sustitución de flujos frágiles basados en next()
• revisión de si una lógica de guard debería ir a nivel global, por ruta o dentro del componente

Patrones habituales que la skill puede corregir

Puedes esperar que esta skill te ayude a elegir entre:

• beforeEach vs beforeEnter vs onBeforeRouteUpdate
• watch(() => route.params.id) vs forzar remontaje con :key
• guards basados en return vs el next() obsoleto
• fetch a nivel de componente vs prechecks a nivel de guard
• Vue Router vs simple hash routing para apps en producción

Son decisiones reales de implementación, no simples recomendaciones de estilo.

Plantilla práctica de prompt para obtener mejores resultados

Usa esta plantilla para conseguir mejores resultados con la vue-router-best-practices guide:

• “Use vue-router-best-practices on this Vue 3 app.”
• “Environment: Vue 3, Vue Router 4, Composition API.”
• “Problem: [describe exact navigation bug].”
• “Expected behavior: [what should happen].”
• “Current behavior: [what actually happens].”
• “Files: [paste router config and affected component].”
• “Please: identify the Vue Router gotcha, explain why it happens, propose the safest fix, and include edge cases to test.”

Consejos que mejoran de forma tangible la calidad de la respuesta

Dale al modelo estos detalles si los tienes:

• si la ruta cambia de path o solo cambian params/query
• si el componente se reutiliza entre distintos IDs
• si la autenticación es síncrona o depende de una API
• si usas Options API o Composition API
• si el código todavía depende de next()

Esos detalles determinan directamente qué recomendaciones de instalación y uso de vue-router-best-practices install son las que realmente aplican.

FAQ de la skill vue-router-best-practices

Si estoy empezando, ¿vue-router-best-practices me sirve?

Sí, siempre que ya conozcas lo básico de Vue y necesites ayuda con comportamientos de routing que no son evidentes. No es una introducción paso a paso a Vue Router, pero sí resulta accesible para errores frecuentes de producción porque las referencias están organizadas alrededor de bugs concretos y sus soluciones.

Cuándo debería usar esto en lugar de un prompt de programación normal

Usa vue-router-best-practices cuando el problema tenga que ver con transiciones entre rutas, timing de guards, componentes de ruta reutilizados o comportamiento de redirecciones. Un prompt normal puede sugerir código plausible, pero esta skill tiene más probabilidades de detectar casos límite específicos de Vue Router, como que una navegación que solo cambia params no vuelva a disparar beforeEnter.

Esta skill cubre específicamente Vue Router 4

Sí. El material fuente apunta de forma explícita a patrones de Vue Router 4, incluida la migración desde el estilo obsoleto con next() hacia guards basados en return.

Cuáles son los principales riesgos que ayuda a evitar

Los problemas de mayor valor que ayuda a prevenir son:

• acceso no autorizado porque los guards no se vuelven a ejecutar
• datos obsoletos en la página al cambiar params
• comprobaciones async de navegación que se quedan colgadas o fallan de forma silenciosa
• bucles infinitos de redirección
• malentendidos sobre el ciclo de vida en beforeRouteEnter

Cuándo encaja mal esta skill

Sáltate esta skill si tu problema se centra sobre todo en:

• routing SSR con abstracciones específicas de un framework
• arquitectura general de componentes Vue no relacionada con navegación
• un tutorial completo de routing desde cero
• librerías de routing frontend que no sean de Vue

Es una skill de vue-router-best-practices for Frontend Development enfocada y concreta, no un manual universal sobre routing.

Cómo mejorar la skill vue-router-best-practices

Da escenarios de navegación, no solo volcados de código

Para mejorar las respuestas de vue-router-best-practices, describe la transición de ruta exacta:

• desde qué URL
• hacia qué URL
• si solo cambiaron params/query
• si el usuario debería ser redirigido, bloqueado o autorizado

Esto importa porque muchos bugs de Vue Router solo aparecen en una ruta de navegación concreta.

Incluye tanto el código del router como el del componente

Un fallo frecuente es diagnosticar solo la mitad del problema. Por ejemplo, un route guard puede estar bien, mientras que el componente sigue dependiendo de onMounted y muestra datos obsoletos al pasar de /users/1 a /users/2. Incluye ambos archivos para que la skill pueda conectar la lógica de los guards con el comportamiento del ciclo de vida del componente.

Pide una decisión, no solo una corrección

Mejor prompt:

• “Should this logic live in beforeEach, beforeEnter, onBeforeRouteUpdate, or a watch, and why?”

Esto produce una salida más útil que “fix this bug”, porque la skill destaca especialmente al elegir la capa de routing adecuada.

Vigila estos modos de fallo habituales

Los problemas más comunes que conviene revisar tras la primera respuesta:

• la corrección sigue asumiendo que beforeEnter se ejecuta cuando cambian params
• la solución mezcla next() con patrones basados en return
• la redirección de auth todavía puede apuntar a la ruta actual
• las comprobaciones async hacen await, pero no manejan errores o timeouts
• los datos obsoletos se corrigen forzando un remontaje cuando un watch más ligero habría bastado

Pide una checklist de pruebas después del parche

Un buen paso de mejora es:

• “Now give me a minimal test checklist for direct visit, authenticated visit, unauthenticated redirect, same-route param change, query change, and invalid ID.”

Esto es especialmente importante al usar la vue-router-best-practices skill, porque muchos bugs de routing solo aparecen después de que el flujo feliz inicial ya funcione.

Usa las referencias como ayuda de revisión específica

Después de obtener una primera respuesta, pídele al modelo que la valide frente a la referencia más relevante:

• router-beforeenter-no-param-trigger.md
• router-navigation-guard-infinite-loop.md
• router-param-change-no-lifecycle.md

Esa segunda pasada suele detectar errores sutiles y da más confianza antes de tocar código de routing en producción.