Vue Router Basics

Analogy categoryAnalogies

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).

javascript

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

Rendering 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()).

vue

<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?

Dynamic Routes and Route Params

Related Study Notes in Web Development

Browse all study notes

Web Development

WebSockets Study Notes

Web Development · 30 topics

Web Development

WebAssembly Study Notes

WebAssembly · 30 topics

Web Development

gRPC Study Notes

Protocol Buffers · 30 topics

Web Development

Spring Boot Study Notes

Java · 30 topics

Web Development

Flask Study Notes

Python · 30 topics

Web Development

Django Study Notes

Python · 30 topics

Topics covered

#JavaScript#VueJsStudyNotes#WebDevelopment#VueRouterBasics#Vue#Router#Installing#Creating#StudyNotes#SkillVeris

Vue Router Basics