Vue Router Best Practices

by vuejs-aic9d355ff23f6MITListed Oct 8, 2026Updated Oct 8, 2026

Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.

AI-generated overview

Reference guidance on Vue Router 4 navigation guards, route params, and route-component lifecycle pitfalls.

What it does: This skill is an instruction-only reference that points to eight topic files covering Vue Router 4 patterns and common gotchas. It organizes guidance into navigation guards, route lifecycle, and setup, linking each issue to a dedicated reference document. It produces no files or code artifacts; it directs the agent to the relevant reference for a given routing problem.
When to use it: Use it when working on Vue Router 4 code and encountering issues such as guards not firing on param changes, deprecated next() usage, redirect loops, stale data, or listener cleanup. It is also relevant when setting up routing for a production single-page application.
Requirements: No tools, packages, or credentials are required; it ships no scripts and only needs the bundled reference markdown files to be readable.

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

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

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

Building production single-page application → See router-use-vue-router-for-production [blocked]

Source and attribution

License: MIT

Content belongs to its original authors. SourceWeft indexes it from a public repository.