# Improve Vue Router Navigation

Vue Router mistakes can cause stale data, redirect loops, and unreliable navigation. This skill provides focused Vue Router 4 patterns for implementation and review.

## Install

```bash
npx skillstore add github.com/vuejs-ai/antfu-vue-router-best-practices
```

## Metadata

- Status: approved
- Slug: antfu-vue-router-best-practices
- Version: 1.0.0
- Author version: 1.0.0
- Skillstore revision: r2
- Version status: valid
- Tree hash: 1b1d4a6be7f036e4dd9a4c3e38197c2434ea23957903bd64394eebbbb312dcb7
- Author: github.com/vuejs-ai
- GitHub username: antfu
- License: MIT
- Repository: https://github.com/antfu/skills/tree/main/skills/vue-router-best-practices/
- Ref: 89edfdc710d0846129dcee6a929477b04f08052c
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: scripts, external\_commands
- Quality score: 80
- Quality tier: silver
- Public page: https://skillstore.pages.dev/skills/antfu-vue-router-best-practices
- Manifest: https://skillstore.pages.dev/api/skills/antfu-vue-router-best-practices/manifest

## Capabilities

- Explains when route parameter changes bypass per-route guards and lifecycle hooks.
- Shows return-based patterns for synchronous and asynchronous navigation guards.
- Identifies causes and fixes for infinite redirect loops.
- Demonstrates cleanup for hashchange event listeners.
- Provides a production Vue Router setup with nested, lazy, and catch-all routes.
- Compares component, route-level, and global guard behavior.

## Use Cases

- Review Navigation Guards: Find missing returns, unhandled promises, deprecated callbacks, and redirect loops in Vue Router guards.
- Fix Stale Route Data: Choose watchers or update guards when reused route components display data for an earlier parameter.
- Plan Production Routing: Create a maintainable router structure with lazy loading, nested routes, metadata, and fallback handling.

## Prompt Templates

### Explain a Router Pattern

```
Explain why this Vue Router behavior occurs and recommend the simplest Vue Router 4 pattern: [describe behavior].
```

### Fix a Navigation Guard

```
Review this navigation guard for missing returns, deprecated next usage, asynchronous errors, and redirect loops: [paste guard].
```

### Review Route Data Loading

```
Review this route component for stale parameter data and lifecycle mistakes. Suggest a watcher, update guard, or route-level approach: [paste component].
```

### Audit a Router Architecture

```
Audit this Vue Router configuration for guard order, authorization flow, redirects, lazy loading, nested routes, cleanup, and error handling: [paste files].
```

## Limitations

- Covers Vue Router 4 and does not target Vue Router 3 behavior.
- Provides reference patterns but does not execute or test application code.
- Does not replace application-specific authorization or threat modeling.
- Examples require adaptation to each project's state and data layers.

## Best Practices

- Return navigation outcomes from guards and await every asynchronous authorization decision.
- React directly to route parameter changes when Vue reuses a component instance.
- Keep redirects centralized and exclude their destination routes from repeated guard checks.

## Anti Patterns

- Do not rely only on mounted hooks for data tied to changing route parameters.
- Do not call next multiple times or mix next callbacks with return-based guard outcomes.
- Do not create hashchange listeners without removing them during component cleanup.

## Security Audit

- Audited at: 2026-07-23T08:37:52.129\+00:00
- Summary: All 15 static findings are false positives from documented Vue Router examples. Fixed local imports, JavaScript template literals, route checks, and framework warnings do not create execution or reconnaissance risks. No prompt injection or malicious intent was found.

## Stats

- Views: 148
- Downloads: 21
- Favorites: 0
- Popularity score: 0