Vue Router is de officiële client-side router voor Vue SPA's. Het wijst URL's toe aan componenten en vervangt deze zonder volledige paginaherladingen, en biedt navigation guards om logica uit te voeren (zoals authenticatiecontroles) voordat navigatie plaatsvindt.
{ createRouter, createWebHistory } ;
routes = [
{ : , : },
{ : , : },
{ : , : (),
: { : } },
];
router = ({ : (), routes });
<template>
<RouterLink to="/users/42">Profile</RouterLink> <!-- declarative navigation -->
<RouterView /> <!-- where the matched component renders -->
</template>
<script setup>
import { useRoute, useRouter } from "vue-router";
const route = useRoute(); // read current route: route.params.id, route.query
const router = useRouter(); // navigate programmatically: router.push("/home")
</script>
// global guard — runs before EVERY navigation (great for auth)
router.beforeEach((to, from) => {
const authed = useAuthStore().isLoggedIn;
if (to.meta.requiresAuth && !authed) {
return "/login"; // redirect: return a path (or false to cancel)
}
// returning true / nothing → allow the navigation
});
Guards ontvangen to (doelroute) en from (huidge), en kunnen toestaan, annuleren (false) of omleiden (een locatie retourneren). De vlag meta.requiresAuth + een globale beforeEach is het canonieke authenticatiepoort-patroon.
Global: router.beforeEach / afterEach — every navigation (auth, analytics)
Per-route: beforeEnter in the route config — specific routes
In-component: onBeforeRouteLeave — e.g. "unsaved changes, leave?" prompts
{ path: "/settings", component: Settings, children: [
{ path: "profile", component: Profile }, // → /settings/profile, renders in nested <RouterView>
]}
Plus: routeparameters, querystrings, benoemde routes, scrollgedrag en lazy-loaded routecomponenten voor codesplitsing.
Vue Router is essentieel voor elke multi-page Vue SPA — het biedt client-side navigatie (snel, geen herladingen), dynamische/geneste routes en RouterLink/RouterView.
Navigation guards zijn de sleutelfunctie voor cross-cutting concerns: het beveiligen van beveiligde routes via authenticatie, het registreren van paginaweergaven en het voorkomen van navigatie weg van niet-opgeslagen formulieren.
Het meta + globale beforeEach-patroon voor authenticatie is iets wat bijna elke echte app implementeert.