vue-router

Original：🇺🇸 English

Translated

Vue Router - official router for Vue.js. Use when building single-page applications with routing, navigation guards, nested routes, or programmatic navigation.

1installs

Sourcehairyf/skills

Added on2026-02-10

NPX Install

npx skill4agent add hairyf/skills vue-router

SKILL.md Content

View Translation Comparison →

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