Vue Router Vue SPAs को लागि अधिकृत client-side router हो। यो URLs लाई components सँग म्याप गर्छ र तिनलाई पूर्ण पेज रिलोड बिना स्वैप गर्छ, र navigation guards प्रदान गर्छ जुन navigation अघि logic (जस्तै 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) प्राप्त गर्छ, र अनुमति दिन सक्छ, रद्द गर्न सक्छ (false), वा redirect गर्न सक्छ (location return गर्दै)। meta.requiresAuth flag + global beforeEach canonical auth-gating pattern हो।
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 (छिटो, कुनै reloads छैन), dynamic/nested routes, र RouterLink/RouterView प्रदान गर्छ।
Navigation guards cross-cutting concerns को लागि मुख्य feature हैन: auth द्वारा protected routes gating गर्दै, page views लग गर्दै, र unsaved forms बाट navigation अलग गर्दै।
meta + global beforeEach pattern authentication को लागि लगभग हरेक real app ले लागू गर्छ।