Vue Router Basics

Mapping URLs to components

Vue Router (version 4 for Vue 3) is the official router. You create it with createRouter, a history mode such as createWebHistory() (clean URLs; the server must fall back to index.html) or createWebHashHistory(), and an array of routes pairing a path with a component. <RouterView /> renders the matched component and <RouterLink to="..."> renders a link that navigates without a full page reload. Dynamic segments like /users/:id are available as route.params.id through useRoute(), and useRouter() gives programmatic navigation with router.push(). When only the params change, the same component instance is reused, so watch the param to reload data.

Pages in a single-page app

Vue Router maps URLs to components, guards navigation and loads route code on demand.

Router setup and a user page

router/index.js and UserPage.vue.

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import HomePage from '@/views/HomePage.vue'
import UserPage from '@/views/UserPage.vue'

export const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', name: 'home', component: HomePage },
    { path: '/users/:id', name: 'user', component: UserPage },
  ],
})
// main.js: app.use(router)

// App.vue template:
// <nav><RouterLink to="/">Home</RouterLink>
//      <RouterLink :to="{ name: 'user', params: { id: 42 } }">User 42</RouterLink></nav>
// <RouterView />

// UserPage.vue <script setup>:
// import { watch } from 'vue'
// import { useRoute, useRouter } from 'vue-router'
// const route = useRoute()
// const router = useRouter()
// watch(() => route.params.id, (id) => loadUser(id), { immediate: true })
// function goHome() { router.push({ name: 'home' }) }

Navigate by route name

Linking with { name: 'user', params: { id } } instead of hand-built strings means URLs can change in one place without breaking links.

Quick check: Why should a page watch route.params.id?

• RouterLink does not update the URL
• Params are only available after a reload
• The same component instance is reused when only the params change
• route.params is not reactive