Vue Router
js, enabling single-page applications to map URLs to components, manage navigation, and handle nested and dynamic routes.
Definition
Vue Router is the official routing library for Vue.js, enabling single-page applications to map URLs to components, manage navigation, and handle nested and dynamic routes.
Overview
Vue Router is maintained by the Vue.js core team as the standard way to add client-side routing to a Vue.js application. It maps URL paths to Vue components, letting a single-page app render different views without a full page reload, updating the browser's URL and history so back/forward navigation and bookmarking work as expected. A route configuration typically defines a path, the component to render, and optional nested child routes for layouts with sub-views (for example, a dashboard route with separate profile and settings sub-routes rendered inside it). Vue Router also supports dynamic route segments (like /users/:id), route guards for controlling access before entering or leaving a route (useful for authentication checks), and lazy-loaded route components that only download their JavaScript when actually navigated to, improving initial page load performance. As of Vue Router 4, built for Vue 3's Composition API, the library integrates naturally with composables like useRoute and useRouter, and pairs well with state management libraries such as Pinia for coordinating route-driven data fetching. It plays an equivalent role in the Vue ecosystem to what React Router plays for React, though the two libraries have different APIs shaped by their respective frameworks' philosophies.
Key Features
- Maps URL paths to Vue components for client-side navigation
- Supports nested routes for layouts with multiple sub-views
- Dynamic route segments and query parameter handling
- Navigation guards for authentication and access control before route transitions
- Lazy-loaded route components to reduce initial bundle size
- History mode (clean URLs) and hash mode for different deployment needs
- Composition API integration via useRoute and useRouter in Vue Router 4