Vue Router routing और guards को कैसे संभालता है?

Question

Accepted Answer

**Vue Router** Vue SPAs के लिए official client-side router है। यह URLs को components से मैप करता है और उन्हें **पूरे पेज रीलोड के बिना** बदल देता है, और navigation से पहले logic (जैसे auth checks) चलाने के लिए **navigation guards** प्रदान करता है। ## Routes परिभाषित करना ```js import { createRouter, createWebHistory } from "vue-router"; const routes = [ { path: "/", component: Home }, { path: "/users/:id", component: UserProfile }, // dynamic param { path: "/dashboard", component: () => import("./Dashboard.vue"), // lazy-loaded meta: { requiresAuth: true } }, // attach metadata ]; const router = createRouter({ history: createWebHistory(), routes }); ``` ## Navigate करना और params पढ़ना ```vue ``` ## Navigation guards — navigate करने से पहले logic चलाएँ ```js // 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`** (लक्ष्य route) और **`from`** (मौजूदा) मिलते हैं, और वे navigation को अनुमति दे सकते हैं, रद्द कर सकते हैं (`false`), या redirect कर सकते हैं (एक location लौटाकर)। `meta.requiresAuth` flag + एक global `beforeEach` auth-gating का प्रामाणिक pattern है। ## Guard के स्तर ```text 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 ``` ## Nested routes और अन्य विशेषताएँ ```js { path: "/settings", component: Settings, children: [ { path: "profile", component: Profile }, // → /settings/profile, renders in nested ]} ``` इसके अलावा: route params, query strings, named routes, scroll behavior, और code splitting के लिए lazy-loaded route components। ## यह क्यों महत्वपूर्ण है Vue Router किसी भी multi-page Vue SPA के लिए आवश्यक है — यह client-side navigation (तेज़, बिना रीलोड के), dynamic/nested routes, और `RouterLink`/`RouterView` प्रदान करता है। Navigation guards cross-cutting concerns के लिए मुख्य विशेषता हैं: auth द्वारा protected routes को gating करना, page views को log करना, और unsaved forms से दूर navigation को रोकना। Authentication के लिए `meta` + global `beforeEach` pattern लगभग हर वास्तविक app लागू करता है।