Vue Router — The Official Router for Vue.js Applications

Introduction

Vue Router is the official routing solution for Vue.js applications. It maps URL paths to Vue components, enabling single-page application navigation without full page reloads. Deeply integrated with Vue's reactivity system, it supports composition API hooks, typed routes, and seamless transitions between views.

What Vue Router Does

• Maps URL paths to Vue components with static and dynamic route segments
• Supports nested routes for layout composition with parent and child views
• Provides navigation guards (beforeEach, beforeResolve, afterEach) for access control
• Enables named views for rendering multiple components at the same route
• Handles scroll behavior preservation and restoration across navigations

Architecture Overview

Vue Router creates a router instance that intercepts browser navigation events and resolves them against a route configuration tree. Each route maps a path pattern to one or more Vue components. The router maintains a reactive route object that components access via useRoute(). Navigation is performed programmatically via useRouter() or declaratively with RouterLink components. History modes include HTML5 pushState, hash-based, and in-memory for SSR.

Self-Hosting & Configuration

• Install vue-router and create a router instance with createRouter()
• Choose createWebHistory() for clean URLs or createWebHashHistory() for hash-based routing
• Define routes as an array of objects with path, component, and optional children
• Register the router with app.use(router) in your Vue app entry point
• Use lazy loading with dynamic imports: component: () => import("./views/About.vue")

Key Features

• Composition API hooks (useRoute, useRouter) for type-safe route access
• Dynamic route matching with params, wildcards, and custom regex patterns
• Route-level code splitting with automatic lazy loading via dynamic imports
• Navigation guards at global, per-route, and component levels
• Typed route support with TypeScript for compile-time path validation

Comparison with Similar Tools

• React Router — serves the same role for React; Vue Router is Vue-specific with deeper framework integration
• Nuxt routing — file-based routing built on Vue Router; use Vue Router directly for non-Nuxt Vue apps
• unplugin-vue-router — adds file-based routing to plain Vue projects using Vue Router under the hood
• TanStack Router — a framework-agnostic type-safe router; Vue Router is the community standard for Vue

FAQ

Q: Do I need Vue Router if I use Nuxt? A: Nuxt includes Vue Router internally and generates routes from your file structure. You configure routing through Nuxt conventions rather than manual route definitions.

Q: Can I use Vue Router with Vue 2? A: Vue Router v4 requires Vue 3. For Vue 2, use Vue Router v3.

Q: How do I handle 404 pages? A: Add a catch-all route with path: "/:pathMatch(.)" at the end of your routes array.

Q: Does it support server-side rendering? A: Yes. Use createMemoryHistory() on the server and hydrate the client-side router with the same route configuration.

Sources

• https://github.com/vuejs/router
• https://router.vuejs.org/