Vue Router એ Vue SPA માટે official client-side router છે. તે URLs ને કમ્પોનેન્ટ્સ સાથે મેપ કરે છે અને તેમને સંપૂર્ણ પેજ રીલોડ વિના સ્વેપ કરે છે, અને navigation guards પ્રદાન કરે છે જે નેવિગેશન પહેલાં લોજિક ચલાવે છે (જેમ કે auth checks).
{ 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 to (target route) અને from (current) પ્રાપ્ત કરે છે, અને allow, cancel (false), અથવા redirect (location વાપસ કરો) કરી શકે છે. meta.requiresAuth ફ્લેગ + global beforeEach એ canonical 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>
]}
પ્લસ: route params, query strings, named routes, scroll behavior, અને lazy-loaded route components code splitting માટે.
Vue Router કોઈપણ multi-page Vue SPA માટે જરૂરી છે — તે client-side navigation (ઝડપી, કોઈ રીલોડ નહીં), dynamic/nested routes, અને RouterLink/RouterView પ્રદાન કરે છે.
Navigation guards એ cross-cutting concerns માટે key feature છે: protected routes ને auth દ્વારા gate કરવું, page views લોગ કરવું, અને unsaved forms પાસેથી નેવિગેશન રોકવું.
meta + global beforeEach પેટર્ન authentication માટે એવું કંઈક છે જે લગભગ દરેક real app implement કરે છે.