# Vue Router — The Official Router for Vue.js Applications

> The official client-side routing library for Vue.js that provides declarative route mapping, nested routes, navigation guards, and dynamic route matching. Essential infrastructure for any Vue single-page application.

## Install

Save in your project root:

# Vue Router — The Official Router for Vue.js Applications

## Quick Use
```bash
npm install vue-router@4
```
```js
import { createRouter, createWebHistory } from "vue-router";
import Home from "./views/Home.vue";
import About from "./views/About.vue";

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: "/", component: Home },
    { path: "/about", component: About },
  ],
});
```

## 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/

---
Source: https://tokrepo.com/en/workflows/asset-8ca2ec1a
Author: AI Open Source