# Improve Vue Router Navigation Patterns

Vue Router bugs often come from guard flow, route params, and component lifecycle assumptions. This skill gives Claude, Codex, and Claude Code focused patterns for safer Vue Router 4 implementations.

## Install

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

## Metadata

- Status: approved
- Slug: vuejs-ai-vue-router-best-practices
- Version: 1.0.0
- Author version: 1.0.0
- Skillstore revision: r1
- Version status: valid
- Tree hash: 8c0af64fe4ac79fe58f7f00c339ba15eedd861217fc4997827d9bfcc90ad8b9f
- Author: github.com/vuejs-ai
- GitHub username: vuejs-ai
- License: MIT
- Repository: https://github.com/vuejs-ai/skills/tree/main/skills/vue-router-best-practices/
- Ref: 36e07d5e13068e5be64447e8f20b427cf2cbd21a
- 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/vuejs-ai-vue-router-best-practices
- Manifest: https://skillstore.pages.dev/api/skills/vuejs-ai-vue-router-best-practices/manifest

## Capabilities

- Explains when beforeEnter, beforeEach, and in-component guards run.
- Shows async guard patterns with explicit returns and timeout handling.
- Demonstrates route-param refresh patterns with watchers and onBeforeRouteUpdate.
- Documents lazy-loaded route configuration for Vue Router 4 applications.
- Highlights cleanup needs for routing without Vue Router.

## Use Cases

- Fix guard redirects: Diagnose login loops, missing returns, and guards that continue navigation too early.
- Review route lifecycle bugs: Check stale data issues when users move between routes that reuse the same component.
- Plan production routing: Ask an AI assistant to structure routes with lazy loading, auth metadata, nested routes, and catch-all handling.

## Prompt Templates

### Explain a Router Issue

```
Explain why this Vue Router behavior happens and identify the best pattern from this skill. Focus on guards, params, and lifecycle behavior.
```

### Audit Navigation Guards

```
Review my Vue Router guards for missing returns, redirect loops, deprecated next usage, and async mistakes. Give prioritized fixes.
```

### Refactor Param Handling

```
Help refactor a route component that shows stale data when params change. Compare watchers, onBeforeRouteUpdate, and keyed router views.
```

### Design Production Routing

```
Design a production Vue Router 4 setup for my app. Include lazy-loaded views, auth metadata, nested routes, error routes, and guard strategy.
```

## Limitations

- Does not run or modify application code.
- Does not validate project-specific auth or API logic.
- Does not replace Vue Router documentation for every API option.
- Examples are educational and may need adaptation to local routing structure.

## Best Practices

- Use explicit returns in async guards so navigation outcomes are clear.
- Handle route-param changes with watchers or in-component update guards.
- Keep redirect targets excluded from guards that could send users back.

## Anti Patterns

- Relying only on onMounted for data that depends on route params.
- Calling legacy next callbacks multiple times or in only some branches.
- Redirecting users without checking the destination route first.

## Security Audit

- Audited at: 2026-07-07T07:03:13.875\+00:00
- Summary: All 15 static findings were false positives after context review. The dynamic imports are static Vue Router lazy-loading examples, the backticks are JavaScript log template literals, and the route checks are tutorial code. No evidence found of prompt injection, data exfiltration, filesystem access, command execution, or malicious intent.

## Stats

- Views: 152
- Downloads: 18
- Favorites: 0
- Popularity score: 0