---
name: Vue Router Best Practices
slug: vue-router-best-practices
category: Frontend
description: Vue Router Best Practices covers Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions. Use it to avoid common navigation pitfalls in Vue applications.
github: "https://github.com/antfu/skills/tree/main/skills/vue-router-best-practices"
language: TypeScript
stars: 5760
forks: 317
install: "npx degit https://github.com/antfu/skills/tree/main/skills/vue-router-best-practices ~/.claude/skills/vue-router-best-practices"
installs_to: ~/.claude/skills/vue-router-best-practices
source_path: skills/vue-router-best-practices/SKILL.md
collection_size: 19
category_size: 567
collection_url: "https://dirskills.com/collections/antfu/skills"
added: 2026-08-15T06:52:36.852Z
last_synced: 2026-08-15T06:52:36.852Z
canonical_url: "https://dirskills.com/skills/vue-router-best-practices"
---

# Vue Router Best Practices

Vue Router Best Practices covers Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions. Use it to avoid common navigation pitfalls in Vue applications.

**Install:**

```bash
npx degit https://github.com/antfu/skills/tree/main/skills/vue-router-best-practices ~/.claude/skills/vue-router-best-practices
```

## README

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)