Habilidades vue-router-best-practices

📦

vue-router-best-practices

Name: vue-router-best-practices
Author: github.com/vuejs-ai

Seguro

Apply Vue Router Best Practices

También disponible en: github.com/vuejs-ai

Vue Router applications often suffer from navigation guard pitfalls, route lifecycle issues, and component unmount problems. This skill provides curated patterns and solutions for Vue Router 4 to prevent common bugs and build robust routing architecture.

Soporta: Claude Codex Code(CC)

📊 70 Adecuado

Descargar el ZIP de la skill

Subir en Claude

Ve a Configuración → Capacidades → Skills → Subir skill

Activa y empieza a usar

Pruébalo

Usando "vue-router-best-practices". beforeEnter guard does not fire when navigating from /orders/1 to /orders/2

Resultado esperado:

The beforeEnter guard only fires when entering a route from a DIFFERENT route. Changes to params within the same route do NOT trigger beforeEnter.
To handle param changes, use onBeforeRouteUpdate in your component:
```javascript
import { onBeforeRouteUpdate } from 'vue-router'
onBeforeRouteUpdate(async (to, from) => {
// This runs when params change
await fetchOrder(to.params.id)
})
```
Alternative: Use global beforeEach with route comparison logic.

Usando "vue-router-best-practices". Users get stuck in infinite redirect loop on protected route

Resultado esperado:

Common causes of infinite redirect loops:
1. Guard logic returns true/false without redirecting
2. Authentication check runs on login page itself
3. Missing return statement after redirect
Fix: Ensure guards check current auth state, not redirect blindly, and exclude login route from auth checks.

Auditoría de seguridad

Seguro

v1 • 2/8/2026

All 192 static findings are false positives. The scanner misinterpreted markdown code block syntax (```) as shell backticks, example URLs as hardcoded network endpoints, and legitimate documentation patterns as malicious code. This is a pure documentation skill containing Vue Router best practices.

Archivos escaneados

1,540

Líneas analizadas

hallazgos

Auditorías totales

No se encontraron problemas de seguridad

Auditado por: claude

Puntuación de calidad

Arquitectura

100

Mantenibilidad

Contenido

Comunidad

100

Seguridad

Cumplimiento de la especificación

Lo que puedes crear

Debug Navigation Guard Issues

Developer encounters a route guard that does not fire when navigating between same-route params. Uses skill to identify the issue and apply onBeforeRouteUpdate pattern.

Review Vue Router Codebase

Code reviewer checks Vue Router implementation for common gotchas. Uses skill to verify proper handling of navigation guards, lifecycle hooks, and cleanup patterns.

Learn Vue Router Patterns

Developer new to Vue Router learns best practices through curated reference documents. Uses skill to understand navigation guard patterns, lazy loading, and route cleanup.

Prueba estos prompts

Basic Vue Router Help

I have a Vue Router navigation guard that should fire when URL params change but it does not. What is happening and how do I fix it?

Debug Guard Behavior

My Vue Router application enters an infinite redirect loop when users try to access a protected route. The guard checks authentication and redirects to login, but something goes wrong. Help me identify the cause and fix it.

Lifecycle and Cleanup

I noticed memory leaks in my Vue Router app. Event listeners and subscriptions persist after navigating away from routes. What patterns should I use to properly clean up resources on route changes?

Review Route Architecture

Review my Vue Router configuration for common pitfalls. Check for: beforeEnter guards on same-route navigation, async guard patterns, deprecated next() usage, and missing lifecycle handling for param changes. Provide specific fixes for any issues found.

Mejores prácticas

Use in-component navigation guards (onBeforeRouteUpdate, onBeforeRouteLeave) for component-specific logic rather than relying solely on route-level beforeEnter guards
Always handle async operations in navigation guards with try/catch and proper error handling to prevent unhandled rejections
Implement cleanup logic in onBeforeRouteLeave or use Vue's onUnmounted hook to prevent memory leaks from lingering subscriptions and event listeners

Evitar

Relying on beforeEnter guards for param/query changes - they only fire on route transitions, not within-route navigation
Using the deprecated next() function in Vue Router 4 - return values have replaced next()
Forgetting to clean up event listeners or subscriptions when navigating away from routes, causing memory leaks

Preguntas frecuentes

What is the difference between beforeEnter and onBeforeRouteUpdate?

beforeEnter fires only when entering a route from a different route. onBeforeRouteUpdate fires when navigating within the same route when params, query, or hash change.

Is next() still supported in Vue Router 4?

No, next() is deprecated in Vue Router 4. Use return values instead: return false to abort, return path to redirect, or return undefined to continue.

Why does my component lifecycle not trigger when params change?

Vue Router reuses the same component instance when navigating between same-route params. Use onBeforeRouteUpdate to react to param changes or watch route params directly.

How do I prevent memory leaks in Vue Router apps?

Remove event listeners and cancel subscriptions in onBeforeRouteLeave or onUnmounted. Use AbortController for fetch requests and properly dispose of any observers.

What causes infinite redirect loops in navigation guards?

Common causes include: missing redirect return statements, checking auth on the auth redirect page itself, or guard logic that always redirects regardless of current state.

Should I use global guards or component guards?

Use global guards for cross-cutting concerns like authentication. Use component guards for logic specific to that component's data or UI state.