Vue Router adalah router klien resmi untuk Vue SPA. Ia memetakan URL ke komponen dan menukarnya tanpa reload halaman penuh, dan menyediakan navigation guards untuk menjalankan logika (seperti pemeriksaan autentikasi) 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
});
Guards menerima to (target route) dan from (current), dan dapat mengizinkan, membatalkan (false), atau mengalihkan (mengembalikan lokasi). Flag meta.requiresAuth + global beforeEach adalah pola canonical untuk auth-gating.
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>
]}
Tambahan: route params, query strings, named routes, scroll behavior, dan lazy-loaded route components untuk code splitting.
Vue Router sangat penting untuk Vue SPA multi-halaman — menyediakan navigasi klien (cepat, tanpa reload), routes dinamis/nested, dan RouterLink/RouterView.
Navigation guards adalah fitur utama untuk cross-cutting concerns: membatasi routes terlindungi dengan autentikasi, logging page views, dan mencegah navigasi dari form yang belum disimpan.
Pola meta + global beforeEach untuk autentikasi adalah sesuatu yang hampir setiap aplikasi nyata implementasikan.