Vue Router

Overview

Vue Router serves as the official client-side routing library for Vue.js applications, facilitating the creation of single-page applications (SPAs) where navigation occurs without full page reloads. It provides a system for mapping URL paths to Vue components, allowing developers to build complex user interfaces with distinct navigable states. The library is designed to integrate with Vue's component-based architecture and reactivity system, offering a declarative syntax for defining routing logic.

Developers use Vue Router to manage various routing patterns, including static routes, dynamic segments for parameterized paths, and nested routes for hierarchical UI structures. This approach allows components to render based on the current URL, enhancing user experience by providing persistent application state and direct linkability to specific views. Vue Router supports HTML5 History Mode by default for clean URLs, falling back to hash mode for older browser compatibility when necessary Vue Router history mode documentation. Its modular design enables features like navigation guards, which can be used to protect routes, redirect users, or fetch data before rendering a component.

The library is suitable for projects ranging from small personal websites to large-scale enterprise applications built with Vue.js. Its declarative nature simplifies the management of application flow, allowing developers to define routes as an array of objects, each specifying a path, component, and optional metadata. This structure promotes maintainable and scalable routing configurations. For those working with other frontend frameworks, alternative routing solutions like React Router serve a similar purpose within the React ecosystem React Router homepage.

Key features

• Nested Routes: Allows the creation of hierarchical route structures, where parent routes can render multiple child components based on sub-paths, directly mapping to nested UI layouts Vue Router nested routes guide.
• Dynamic Route Matching: Supports routes with dynamic segments (e.g., /users/:id) that can capture URL parameters and pass them as props to components Vue Router dynamic matching documentation.
• Navigation Guards: Provides hooks (beforeEach, beforeEnter, beforeRouteUpdate, beforeRouteLeave) that allow developers to intercept navigation, perform redirections, or cancel navigation, often used for authentication or data fetching logic Vue Router navigation guards.
• Programmatic Navigation: Offers an API (router.push(), router.replace(), router.go()) for navigating programmatically within the application, useful for form submissions or button clicks Vue Router programmatic navigation guide.
• Scroll Behavior Management: Allows customization of scroll position when navigating to new routes, including restoring scroll position or scrolling to an anchor Vue Router scroll behavior documentation.
• Named Routes & Named Views: Facilitates navigation and component rendering using aliases for routes, improving readability and maintainability, and enabling multiple components to render simultaneously at different positions in the layout Vue Router named routes.
• Route Meta Fields: Enables attaching arbitrary metadata to routes, accessible within navigation guards or components, useful for permissions, layout control, or breadcrumbs Vue Router route meta fields.

Pricing

As of May 28, 2026, Vue Router is an open-source project distributed under the MIT License. It is free to use for all purposes, including commercial applications.

Common integrations

• Vue.js: As the official routing solution, Vue Router integrates directly into Vue.js applications, leveraging its component system and reactivity Vue Router integration with Vue.js.
• Pinia / Vuex: Often combined with state management libraries like Pinia or Vuex to manage global application state that might be influenced by route changes, such as user authentication status or fetched data.
• Vite / Vue CLI: Integrated into modern Vue development workflows through build tools like Vite or Vue CLI, which provide project scaffolding and optimized build processes compatible with Vue Router.
• UI Component Libraries: Works alongside UI libraries such as Vuetify, Element Plus, or Material Design components to provide navigation within aesthetically consistent user interfaces Material Design 3 documentation.
• Axios / HTTPX: Used in conjunction with HTTP client libraries like Axios Axios documentation or HTTPX HTTPX quickstart for fetching data based on route parameters or before entering specific routes via navigation guards.

Alternatives

• React Router: The standard routing library for React applications, offering declarative navigation and a similar set of features for SPAs.
• TanStack Router: A type-safe router for React, Solid, and Vue, designed for modern web applications with a focus on developer experience and performance.
• SvelteKit: A framework for building Svelte applications, which includes its own file-system-based routing solution.

Getting started

To begin using Vue Router in a Vue.js project, you first need to install it and then define your routes. Here's a basic example to set up a simple router:

// main.js
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import Home from './components/Home.vue'
import About from './components/About.vue'

// 1. Define route components.
// These can be imported from other files
// const Home = { template: '<div>Home</div>' }
// const About = { template: '<div>About</div>' }

// 2. Define some routes
// Each route should map to a component.
// The "path" is the URL path.
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]

// 3. Create the router instance and pass the `routes` option
// You can also pass in an optional `history` option, but for now
// we'll just use the default HTML5 history API.
const router = createRouter({
  // 4. Provide the history implementation to use.
  // For production, use createWebHistory() for clean URLs.
  history: createWebHistory(),
  routes, // short for `routes: routes`
})

// 5. Create and mount the root instance.
const app = createApp(App)
app.use(router)
app.mount('#app')

Next, define the App.vue and component files:

<!-- App.vue -->
<template>
  <div id="app">
    <h1>Welcome to My App</h1>
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<!-- components/Home.vue -->
<template>
  <div>
    <h2>Home Page</h2>
    <p>This is the home page content.</p>
  </div>
</template>

<script>
export default {
  name: 'Home',
}
</script>

<!-- components/About.vue -->
<template>
  <div>
    <h2>About Page</h2>
    <p>Learn more about us here.</p>
  </div>
</template>

<script>
export default {
  name: 'About',
}
</script>

This setup creates a basic Vue application with two routes: '/' (Home) and '/about' (About). The <router-link> component generates navigation links, and the <router-view> component acts as a placeholder where the matched component for the current route will be rendered.