> **vue-router-best-practices** — skill 15 of 19 in [antfu/skills](https://skillsdocs.com/antfu/skills).
>
> Book (all skills, one file): https://skillsdocs.com/antfu/skills.md
> Machine manifest: https://skillsdocs.com/antfu/skills/.well-known/agent-skills/index.json
> Install the book: `npx skills add antfu/skills`
> Upstream: https://github.com/antfu/skills/blob/main/skills/vue-router-best-practices/SKILL.md @ `main`
> Raw bytes, no header: https://raw.githubusercontent.com/antfu/skills/main/skills/vue-router-best-practices/SKILL.md
> Base for relative paths: https://raw.githubusercontent.com/antfu/skills/main/skills/vue-router-best-practices/
> Licence: MIT — https://spdx.org/licenses/MIT.html
>
> Bundled files (10), referenced from this skill's directory:
>   - `LICENSE.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-router-best-practices/LICENSE.md
>   - `reference/router-beforeenter-no-param-trigger.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-router-best-practices/reference/router-beforeenter-no-param-trigger.md
>   - `reference/router-beforerouteenter-no-this.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-router-best-practices/reference/router-beforerouteenter-no-this.md
>   - `reference/router-guard-async-await-pattern.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-router-best-practices/reference/router-guard-async-await-pattern.md
>   - `reference/router-navigation-guard-infinite-loop.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-router-best-practices/reference/router-navigation-guard-infinite-loop.md
>   - `reference/router-navigation-guard-next-deprecated.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-router-best-practices/reference/router-navigation-guard-next-deprecated.md
>   - `reference/router-param-change-no-lifecycle.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-router-best-practices/reference/router-param-change-no-lifecycle.md
>   - `reference/router-simple-routing-cleanup.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-router-best-practices/reference/router-simple-routing-cleanup.md
>   - `reference/router-use-vue-router-for-production.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-router-best-practices/reference/router-use-vue-router-for-production.md
>   - `SYNC.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-router-best-practices/SYNC.md
>
> Content © its authors, served unmodified. Takedown: https://github.com/DreambaseAI/skillsdocs/issues/new?labels=takedown&title=Takedown+request

<!-- Verbatim upstream SKILL.md follows, YAML frontmatter included. -->

---
name: vue-router-best-practices
description: "Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions."
version: 1.0.0
license: MIT
author: github.com/vuejs-ai
---

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

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

### Route Lifecycle
- Stale data when navigating between same route → See [router-param-change-no-lifecycle](reference/router-param-change-no-lifecycle.md)
- Event listeners persisting after component unmounts → See [router-simple-routing-cleanup](reference/router-simple-routing-cleanup.md)

### Setup
- Building production single-page application → See [router-use-vue-router-for-production](reference/router-use-vue-router-for-production.md)