Vue Router
The skill is based on Vue Router v5.0.1, generated at 2026-01-31.
Vue Router is the official router for Vue.js. It deeply integrates with Vue.js core to make building Single Page Applications with Vue.js a breeze. Features include nested routes mapping, dynamic routing, modular component-based router configuration, route params, query, wildcards, view transition effects, fine-grained navigation control, links with automatic active CSS classes, HTML5 history mode or hash mode, customizable scroll behavior, and proper encoding for URLs.
Core References
| Topic |
Description |
Reference |
| Router Setup |
Create router instance, register plugin, access router/route |
core-router-setup |
| Navigation |
Programmatic navigation with push, replace, go methods |
core-navigation |
| RouterView & RouterLink |
Components for rendering routes and creating navigation links |
core-router-view-link |
Essentials
Route Configuration
| Topic |
Description |
Reference |
| Dynamic Matching |
Dynamic route segments with params, accessing route.params |
essentials-dynamic-matching |
| Nested Routes |
Nested route configuration with children option |
essentials-nested-routes |
| Named Routes |
Named routes for navigation without hardcoded URLs |
essentials-named-routes |
| Named Views |
Multiple RouterView components for complex layouts |
essentials-named-views |
| History Mode |
HTML5 history, hash mode, memory mode, server configuration |
essentials-history-mode |
| Route Matching Syntax |
Custom regex, repeatable params, optional params |
essentials-route-matching-syntax |
| Active Links |
Active link CSS classes, router-link-active vs exact-active |
essentials-active-links |
| Passing Props |
Pass route params as component props |
essentials-passing-props |
| Redirect & Alias |
Route redirects and aliases for URL mapping |
essentials-redirect-alias |
Advanced
Navigation & Guards
| Topic |
Description |
Reference |
| Navigation Guards |
Global guards, per-route guards, in-component guards |
advanced-navigation-guards |
| Navigation Failures |
Detecting aborted/cancelled/duplicated navigations |
advanced-navigation-failures |
Composition & TypeScript
| Topic |
Description |
Reference |
| Composition API |
useRouter, useRoute, navigation guards, useLink |
advanced-composition-api |
| Typed Routes |
TypeScript typed routes for autocomplete and type safety |
advanced-typed-routes |
Advanced Features
| Topic |
Description |
Reference |
| Transitions |
Route transitions using RouterView slot |
advanced-transitions |
| Scroll Behavior |
Custom scroll behavior on navigation |
advanced-scroll-behavior |
| Meta Fields |
Route meta fields for custom data |
advanced-meta |
| Lazy Loading |
Lazy loading route components with dynamic imports |
advanced-lazy-loading |
| Dynamic Routing |
Adding and removing routes at runtime |
advanced-dynamic-routing |
| RouterView Slot |
Advanced RouterView slot API for custom rendering |
advanced-router-view-slot |
1---
2name: vue-router
3description: Vue Router - official router for Vue.js. Use when building single-page applications with routing, navigation guards, nested routes, or programmatic navigation.
4metadata:
5 author: Anthony Fu
6 version: "2026.1.31"
7 source: Generated from https://github.com/vuejs/router, scripts located at https://github.com/antfu/skills
8---
9
10# Vue Router
11
12> The skill is based on Vue Router v5.0.1, generated at 2026-01-31.
13
14Vue Router is the official router for Vue.js. It deeply integrates with Vue.js core to make building Single Page Applications with Vue.js a breeze. Features include nested routes mapping, dynamic routing, modular component-based router configuration, route params, query, wildcards, view transition effects, fine-grained navigation control, links with automatic active CSS classes, HTML5 history mode or hash mode, customizable scroll behavior, and proper encoding for URLs.
15
16## Core References
17
18| Topic | Description | Reference |
19|-------|-------------|-----------|
20| Router Setup | Create router instance, register plugin, access router/route | [core-router-setup](references/core-router-setup.md) |
21| Navigation | Programmatic navigation with push, replace, go methods | [core-navigation](references/core-navigation.md) |
22| RouterView & RouterLink | Components for rendering routes and creating navigation links | [core-router-view-link](references/core-router-view-link.md) |
23
24## Essentials
25
26### Route Configuration
27
28| Topic | Description | Reference |
29|-------|-------------|-----------|
30| Dynamic Matching | Dynamic route segments with params, accessing route.params | [essentials-dynamic-matching](references/essentials-dynamic-matching.md) |
31| Nested Routes | Nested route configuration with children option | [essentials-nested-routes](references/essentials-nested-routes.md) |
32| Named Routes | Named routes for navigation without hardcoded URLs | [essentials-named-routes](references/essentials-named-routes.md) |
33| Named Views | Multiple RouterView components for complex layouts | [essentials-named-views](references/essentials-named-views.md) |
34| History Mode | HTML5 history, hash mode, memory mode, server configuration | [essentials-history-mode](references/essentials-history-mode.md) |
35| Route Matching Syntax | Custom regex, repeatable params, optional params | [essentials-route-matching-syntax](references/essentials-route-matching-syntax.md) |
36| Active Links | Active link CSS classes, router-link-active vs exact-active | [essentials-active-links](references/essentials-active-links.md) |
37| Passing Props | Pass route params as component props | [essentials-passing-props](references/essentials-passing-props.md) |
38| Redirect & Alias | Route redirects and aliases for URL mapping | [essentials-redirect-alias](references/essentials-redirect-alias.md) |
39
40## Advanced
41
42### Navigation & Guards
43
44| Topic | Description | Reference |
45|-------|-------------|-----------|
46| Navigation Guards | Global guards, per-route guards, in-component guards | [advanced-navigation-guards](references/advanced-navigation-guards.md) |
47| Navigation Failures | Detecting aborted/cancelled/duplicated navigations | [advanced-navigation-failures](references/advanced-navigation-failures.md) |
48
49### Composition & TypeScript
50
51| Topic | Description | Reference |
52|-------|-------------|-----------|
53| Composition API | useRouter, useRoute, navigation guards, useLink | [advanced-composition-api](references/advanced-composition-api.md) |
54| Typed Routes | TypeScript typed routes for autocomplete and type safety | [advanced-typed-routes](references/advanced-typed-routes.md) |
55
56### Advanced Features
57
58| Topic | Description | Reference |
59|-------|-------------|-----------|
60| Transitions | Route transitions using RouterView slot | [advanced-transitions](references/advanced-transitions.md) |
61| Scroll Behavior | Custom scroll behavior on navigation | [advanced-scroll-behavior](references/advanced-scroll-behavior.md) |
62| Meta Fields | Route meta fields for custom data | [advanced-meta](references/advanced-meta.md) |
63| Lazy Loading | Lazy loading route components with dynamic imports | [advanced-lazy-loading](references/advanced-lazy-loading.md) |
64| Dynamic Routing | Adding and removing routes at runtime | [advanced-dynamic-routing](references/advanced-dynamic-routing.md) |
65| RouterView Slot | Advanced RouterView slot API for custom rendering | [advanced-router-view-slot](references/advanced-router-view-slot.md) |
hairyf