Vue Router Vue SPAs کے لیے سرکاری client-side router ہے۔ یہ URLs کو components سے map کرتا ہے اور انہیں مکمل صفحہ ری لوڈ کے بغیر تبدیل کرتا ہے، اور navigation guards فراہم کرتا ہے تاکہ navigation سے پہلے منطق (جیسے 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 (موجودہ) موصول ہوتے ہیں، اور وہ اجازت دے سکتے ہیں، منسوخ کر سکتے ہیں (false)، یا redirect کر سکتے ہیں (ایک location واپس کریں)۔ 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 (تیز، کوئی ری لوڈ نہیں)، dynamic/nested routes، اور RouterLink/RouterView فراہم کرتا ہے۔
Navigation guards cross-cutting concerns کے لیے کلیدی خصوصیت ہیں: protected routes کو auth سے gate کرنا، page views کو log کرنا، اور unsaved forms سے navigation کو روکنا۔
meta + global beforeEach pattern برائے authentication وہ چیز ہے جو تقریباً ہر real app implement کرتی ہے۔
تفصیلی جوابات کے ساتھ IT انٹرویو سوالات کی ایک لائبریری — جونیئر سے سینئر تک۔
عطیہ دیں