LearnAI ToolsCareerPractice BuildsPlayContact
Lesson 3117 min read

Vue Router Basics

Add multi-page navigation to a Vue app using the official Vue Router library.

Installing Vue Router

Vue Router is the official routing library for Vue, maintained by the same core team. If you didn't select it when scaffolding your project, add it directly.

npm install vue-router@4

Defining Routes

A routes array maps URL paths to page components, which the router then uses to build a router instance.

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import HomePage from '../views/HomePage.vue';
import AboutPage from '../views/AboutPage.vue';


const routes = [
  { path: '/', component: HomePage },
  { path: '/about', component: AboutPage },
];


export const router = createRouter({
  history: createWebHistory(),
  routes,
});
// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import { router } from './router';


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

<RouterView> renders whichever component matches the current URL. <RouterLink> is Vue Router's equivalent of an anchor tag, performing client-side navigation without a full page reload.

<!-- App.vue -->
<template>
  <nav>
    <RouterLink to="/">Home</RouterLink>
    <RouterLink to="/about">About</RouterLink>
  </nav>


  <RouterView />
</template>
Always Use RouterLink for Internal Navigation

A plain <a href="/about"> triggers a full page reload, losing all Vue application state — RouterLink intercepts the click and updates the view without reloading anything.

Programmatic Navigation

For navigation triggered by code — after a form submits, for example — use the useRouter composable to access the router instance.

<script setup>
import { useRouter } from 'vue-router';


const router = useRouter();


async function handleLogin() {
  await login();
  router.push('/dashboard');
}
</script>

Common Beginner Mistakes

Forgetting app.use(router) in main.js

Without registering the router as a plugin on the app instance, RouterView/RouterLink and the routing composables won't work anywhere in the app.

Using a plain <a> tag for internal links

This causes a full page reload — always use RouterLink for links within your own app.

FAQs

It tells Vue Router to use the browser's real History API for clean URLs (like /about) instead of hash-based ones (like /#/about) — the recommended default for most apps.

Yes — named views let you render multiple route-driven components simultaneously in different layout regions, similar in spirit to Next.js parallel routes.

Summary

Vue Router turns your app into a multi-page experience using client-side navigation, with RouterView rendering the matched component. Next, you'll add dynamic route parameters and protect routes with navigation guards.

Next Lesson →

Dynamic Routes & Navigation Guards