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 |