Wat is Vue Router?

Vue Router zorgt ervoor dat je app meerdere pagina's heeft — bijvoorbeeld een Home, een About en een Contact pagina. Elke pagina krijgt een eigen URL.

  • localhost:5173/ → Home pagina
  • localhost:5173/about → About pagina
  • localhost:5173/contact → Contact pagina

Belangrijk: Vue Router doet dit zonder dat de pagina ververst. Het wisselt alleen het zichtbare component — heel snel, en de rest van je app blijft staan. Dit heet een SPA (Single Page Application).

Installeren

Heb je tijdens npm create vue@latest Yes gekozen bij "Add Vue Router"? Dan staat alles al klaar. Sla dan deze stap over.

Anders installeer je het zelf:

npm install vue-router@4

Let op: versie 4 is voor Vue 3. Versie 3 is voor Vue 2 (oud). Zorg dat je @4 meegeeft.

Router setup

De router bestaat uit twee stappen: een router-bestand aanmaken en hem in main.js aanzetten.

Stap 1: Pagina-componenten

Maak voor elke pagina een gewoon .vue-bestand in src/views/ (of src/pages/):

<!-- src/views/HomeView.vue -->
<template>
  <h1>Home pagina</h1>
</template>
<!-- src/views/AboutView.vue -->
<template>
  <h1>About pagina</h1>
</template>

Stap 2: Router config (src/router/index.js)

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'

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

export default router

Stap 3: Activeren in main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

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

Dat is het. Je router is nu actief. De volgende twee stappen vertellen Vue waar de pagina moet komen en hoe de gebruiker ernaartoe navigeert.

<RouterView /> — waar de pagina verschijnt

In App.vue zet je <RouterView /> op de plek waar de pagina-content moet komen:

<!-- src/App.vue -->
<template>
  <header>
    <!-- Hier komen de links (zie volgende sectie) -->
  </header>

  <main>
    <RouterView />
  </main>

  <footer>
    <p>© 2025</p>
  </footer>
</template>

Wat doet dit? Op basis van de URL bekijkt Vue Router welke route matcht, en zet het bijbehorende component op de plek van <RouterView />. Header en footer blijven staan.

<RouterLink> — navigatie zonder refresh

Voor links binnen je app gebruik je <RouterLink> in plaats van <a>. Een gewone <a href="..."> herlaadt de hele pagina — <RouterLink> wisselt alleen het component.

<template>
  <nav>
    <RouterLink to="/">Home</RouterLink>
    <RouterLink to="/about">About</RouterLink>
  </nav>
</template>

Actieve link stylen

Vue Router voegt automatisch een class toe aan de actieve link: router-link-active.

.router-link-active {
  color: #42b883;
  font-weight: bold;
}

Veel gemaakte fout: Gebruik nooit <a href="/about"> voor interne navigatie — dat herlaadt de pagina volledig. Altijd <RouterLink to="/about">.

Compleet voorbeeld

Hier is alles samen in één werkende setup:

1. src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'
import ContactView from '../views/ContactView.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: HomeView },
    { path: '/about', component: AboutView },
    { path: '/contact', component: ContactView }
  ]
})

export default router

2. src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

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

3. src/App.vue

<template>
  <nav class="nav">
    <RouterLink to="/">Home</RouterLink>
    <RouterLink to="/about">About</RouterLink>
    <RouterLink to="/contact">Contact</RouterLink>
  </nav>

  <RouterView />
</template>

<style scoped>
.nav { display: flex; gap: 16px; padding: 16px; }
.router-link-active { font-weight: bold; color: #42b883; }
</style>

Wat heb je nu? Een werkende app met 3 pagina's, een navigatie-bar die zonder refresh wisselt, en automatische highlighting van de actieve link.

Belangrijke Regels

  • Interne links → <RouterLink> (geen <a href>)
  • Externe links → gewoon <a href>
  • Pagina-componenten in src/views/ (conventie, niet verplicht)
  • Router activeren met app.use(router) in main.js — vergeet je dat, dan werkt niks
  • Voor URL parameters en programmatische navigatie → zie useRouter & useRoute

Veelgemaakte Fouten

Fout — <a> voor interne navigatie:

<a href="/about">About</a>   <!-- ❌ pagina ververst volledig -->

Goed:

<RouterLink to="/about">About</RouterLink>   <!-- ✅ -->

Fout — RouterView vergeten:

<!-- src/App.vue -->
<template>
  <nav>...</nav>
  <!-- ❌ geen RouterView = pagina's worden nergens getoond -->
</template>

Goed:

<template>
  <nav>...</nav>
  <RouterView />   <!-- ✅ -->
</template>