vue-router-best-practices

Summary

This skill provides documentation and patterns for Vue Router 4 best practices, covering navigation guards, route lifecycle interactions, and common gotchas. It includes 8 reference guides explaining async guard patterns, parameter handling, deprecated syntax, infinite loops, and when to use Vue Router. The skill is read-only, purely informational, and scoped to Vue 3 with Vue Router 4 applications.

Detected Capabilities

Trigger Keywords

Phrases that MCP clients use to match this skill to user intent.

Referenced Domains

External domains referenced in skill content, detected by static analysis.

Use Cases

• navigate between routes with param changes
• implement authentication guards in Vue apps
• debug navigation guard infinite loops
• handle async data fetching in navigation
• prevent memory leaks in route transitions
• migrate from deprecated next() syntax
• design route-based data loading patterns
• fix stale component data when reusing routes

Quality Notes

• All 8 reference files are present and well-organized
• Each guide clearly documents the problem, impact, and solution with code examples
• Task checklists provide actionable guidance for developers
• Comparison tables help clarify different guard types and navigation scenarios
• Composition API and Options API patterns shown for each guide
• Real-world scenarios (infinite loops, stale data) covered with debugging approaches
• Links to official Vue Router documentation provided for reference
• Documentation uses consistent structure: title, impact, problem, solutions, key points
• Examples progress from wrong patterns to correct implementations
• Includes alternative solutions where appropriate (e.g., three approaches to param change handling)