Vue Router je oficijalni router na strani klijenta za Vue SPA-e. Mapira URL-ove na komponente i zamjenjuje ih bez punog osvježavanja stranice, te pruža zaštite navigacije za pokretanje logike (kao što su provjere autentifikacije) prije navigacije.
{ 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
});
Zaštite primaju to (ciljnu rutu) i from (trenutnu), te mogu dozvoliti, otkazati (false), ili preusmjeriti (vratiti lokaciju). Zastavica meta.requiresAuth + globalna beforeEach je kanonski obrazac autentifikacijskih vrata.
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>
]}
Osim toga: parametri rute, query stringovi, nazvane rute, ponašanje pri skrolanju, i ljenosto učitane komponente ruta za dijeljenje koda.
Vue Router je neophodan za bilo koji viestranični Vue SPA — pruža navigaciju na strani klijenta (brza, bez osvježavanja), dinamičke/ugniježđene rute, te RouterLink/RouterView.
Zaštite navigacije su ključna značajka za transpozicijske probleme: gating zaštićenih ruta prema autentifikaciji, bilježenje prikaza stranica, i sprječavanje navigacije od obrazaca s neusprjelih promjena.
Obrazac meta + globalna beforeEach za autentifikaciju je nešto što gotovo svaka stvarna aplikacija primjenjuje.