Vue Router Best Practices

This is a troubleshooting reference for the stuff that actually breaks in Vue Router 4. It covers the classic gotchas: navigation guards not firing when params change, the beforeRouteEnter this access trap, infinite redirect loops, and cleanup issues that cause memory leaks. Each pattern links to a specific problem and solution, from deprecated next() usage to async/await patterns in guards. If you've ever debugged why your component didn't refresh on a param change or why users got stuck in a redirect cycle, this has the answer. It's less about architecture and more about avoiding the pitfalls that waste half your afternoon.

skills.sh installs: 2.5K
GitHub stars: 2.7K
last updated: Jul 14, 2026

View on GitHub

Install

$ npx -y skills add hyf0/vue-skills --skill vue-router-best-practices --agent claude-code

Installs into .claude/skills of the current project.

Files

Vue Router best practices, common gotchas, and navigation patterns.

Navigation Guards

Navigating between same route with different params → See router-beforeenter-no-param-trigger
Accessing component instance in beforeRouteEnter guard → See router-beforerouteenter-no-this
Navigation guard making API calls without awaiting → See router-guard-async-await-pattern
Users trapped in infinite redirect loops → See router-navigation-guard-infinite-loop
Navigation guard using deprecated next() function → See router-navigation-guard-next-deprecated

Route Lifecycle

Stale data when navigating between same route → See router-param-change-no-lifecycle
Event listeners persisting after component unmounts → See router-simple-routing-cleanup

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthly Promote your product hereReach 125k+ visitors monthly