Vue Router — The Official Router

Vue Router maps URLs to components, handles navigation, history, guards, and lazy loading — the standard way to build multi-page Vue SPAs.

4 min read Level 2/5 #vue#router#spa

What you'll learn

Install vue-router
Create a router with createRouter
Use `<router-view>` and `<router-link>`

Vue Router is the official router for Vue. It maps URL paths to components, manages browser history, and supports lazy loading, guards, and nested layouts.

Install

npm i vue-router@4

Create the Router

A router is just a routes array plus a history mode.

// src/router.ts
import { createRouter, createWebHistory } from 'vue-router'
import Home from './pages/Home.vue'
import About from './pages/About.vue'

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

Plug it into the app:

// src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { router } from './router'

createApp(App).use(router).mount('#app')

Render and Navigate

Inside your root component, <router-view /> renders whichever component matches the current URL, and <router-link> is the SPA replacement for <a>.

<template>
  <nav>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </nav>
  <router-view />
</template>

<router-link> intercepts clicks, calls history.pushState, and renders an <a> — no full page reload.

Route Configuration →