Vue Router Basics
Vue Router is the official routing library for Vue.js. It lets you build single-page applications (SPAs) where navigating between 'pages' swaps the rendered component without triggering a full page reload from the server. Instead of the browser making a new HTTP request for every URL change, Vue Router intercepts navigation, matches the new URL against a table of route definitions, and renders the matching component into a designated outlet in your app. This produces the responsiveness users expect from native apps while preserving deep-linkable, bookmarkable URLs and working browser back/forward buttons.
Cricket analogy: Like a stadium's digital scoreboard system that swaps the displayed panel — batting card, bowling figures, or partnership graph — the instant an operator presses a button, without rebooting the whole screen, while still letting broadcasters 'bookmark' a specific panel by channel number and flip back and forth freely.
Installing and Creating a Router Instance
You install vue-router as a dependency and create a router instance with createRouter, supplying a history mode and an array of route objects. Each route object pairs a path string with a component (or a lazy-loaded import). The router instance is then registered on the app with app.use(router), which injects routing capability into every component in the tree via provide/inject internally.
Cricket analogy: Like installing a new stadium's digital signage system (installing vue-router) by first configuring its display mode and a master list pairing each gate number with its specific directional sign (createRouter with routes), some signs only printed on demand to save cost (lazy-loaded import), then flipping the master switch that wires every screen in the stadium to that system (app.use, via internal provide/inject).
// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'
const routes = [
{ path: '/', name: 'home', component: HomeView },
{ path: '/about', name: 'about', component: AboutView },
]
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes,
})
export default routerRendering Matched Routes and Navigating
The <router-view> component acts as a placeholder that renders whichever component matches the current URL. Navigation is done declaratively with <router-link>, which renders an anchor tag and updates the URL without a full reload, or imperatively with router.push() inside script code, for example after a successful form submission.
Cricket analogy: Like a stadium's main display board (router-view) that shows whichever graphic matches the current game state, where fans can tap a labeled button on the app (router-link) to jump straight to the bowling figures, or the system itself automatically flips to the innings-break graphic right after the last wicket falls (router.push()).
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
function goToAbout() {
router.push({ name: 'about' })
}
</script>
<template>
<nav>
<router-link to="/">Home</router-link>
<router-link :to="{ name: 'about' }">About</router-link>
<button @click="goToAbout">Go to About</button>
</nav>
<router-view />
</template>createWebHistory() uses the browser's History API to produce clean URLs like /about, requiring server configuration to fall back to index.html for unknown paths. createWebHashHistory() instead uses a URL fragment like /#/about, which works without any server configuration but is less clean and rarely used for new production apps today.
Forgetting to configure your production server (or hosting provider) to serve index.html for all unmatched paths is a classic deployment pitfall: direct navigation or a page refresh on a route like /about will 404 because the server has no actual /about file, even though client-side routing worked fine during development.
- Vue Router maps URL paths to components, enabling SPA-style navigation without full page reloads.
- createRouter() combines a history mode (createWebHistory or createWebHashHistory) with a routes array.
- app.use(router) registers the router so every component can access it via useRouter()/useRoute().
- <router-view> renders the component matched to the current URL; <router-link> navigates declaratively.
- router.push() performs imperative navigation, useful after actions like form submission.
- Production servers must be configured to serve index.html for all paths when using history mode.
Practice what you learned
1. What is the primary role of the <router-view> component?
2. Which history mode requires server configuration to avoid 404s on direct navigation to a nested path?
3. How do you register the router instance with the main Vue application?
4. Inside a <script setup> component, how do you get access to the router instance to call push() imperatively?
5. What is a key benefit of using named routes over hardcoded path strings when navigating?
Was this page helpful?
You May Also Like
Dynamic Routes and Route Params
Learn how to define route paths with dynamic segments and read those values reactively inside components using route params.
Nested Routes
Learn how to compose layouts with parent and child routes so nested UI sections render inside their own router-view outlets.
Navigation Guards
Understand how global, per-route, and in-component navigation guards let you control, cancel, or redirect navigation, e.g. for authentication.
Related Reading
Related Study Notes in Web Development
Browse all study notesWebSockets Study Notes
Web Development · 30 topics
Web DevelopmentWebAssembly Study Notes
WebAssembly · 30 topics
Web DevelopmentgRPC Study Notes
Protocol Buffers · 30 topics
Web DevelopmentSpring Boot Study Notes
Java · 30 topics
Web DevelopmentFlask Study Notes
Python · 30 topics
Web DevelopmentDjango Study Notes
Python · 30 topics