Vue Router adalah penghala klien rasmi untuk Vue SPA. Ia memetakan URL ke komponen dan menukarnya tanpa penyegaran halaman lengkap, dan menyediakan penjaga navigasi untuk menjalankan logik (seperti pemeriksaan auth) sebelum navigasi.
{ 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
});
Penjaga menerima to (rute target) dan from (arus), dan dapat mengizinkan, membatalkan (false), atau mengalihkan (kembalikan lokasi). Bendera meta.requiresAuth + global beforeEach adalah pola penjaga auth kanonik.
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>
]}
Selain itu: param rute, string kueri, rute bernama, perilaku gulir, dan komponen rute yang dimuat dengan malas untuk pemisahan kode.
Vue Router penting untuk SPA Vue multi-halaman apa pun — ini menyediakan navigasi klien (cepat, tanpa penyegaran), rute dinamis/bersarang, dan RouterLink/RouterView.
Penjaga navigasi adalah fitur kunci untuk kepedulian lintas potong: menjaga rute yang dilindungi dengan auth, pencatatan tampilan halaman, dan mencegah navigasi dari formulir yang tidak disimpan.
Pola meta + global beforeEach untuk autentikasi adalah sesuatu yang hampir setiap aplikasi nyata menerapkan.