Yaya Vue Router yake tafiya da guards?

Question

Accepted Answer

**Vue Router** shi ne ofisyal client-side router don Vue SPAs. Yana zama URLs zuwa components kuma yana suya su **ba tare da cikakken sake lodin shafi ba**, kuma yana ba da **navigation guards** don yin magana (kamar auth checks) kafin tafiya. ## Saita hanyoyi ```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 }); ``` ## Tafiya kuma karanta params ```vue ``` ## Navigation guards — yin magana kafin tafiya ```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 suna karanta **`to`** (target route) da **`from`** (kasalinsus), kuma suna iya ba da izin, soke (`false`), ko sake tunarî (mayar da wuri). Alama `meta.requiresAuth` + global `beforeEach` ita ce mahimmin tsarin gating auth. ## Guard matakai ```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 & sauran fasali ```js { path: "/settings", component: Settings, children: [ { path: "profile", component: Profile }, // → /settings/profile, renders in nested ]} ``` Kari: route params, query strings, named routes, scroll behavior, da lazy-loaded route components don code splitting. ## Me ya sa ya muhimmu Vue Router ainihi mahimmanci a kowane multi-page Vue SPA — yana ba da client-side navigation (sauri, babu sake lodin), dynamic/nested routes, da `RouterLink`/`RouterView`. Navigation guards aiki ne mahimmanci don cross-cutting concerns: gating protected routes ta auth, logging page views, da takaitawa tafiya daga sauran forms. Pattern `meta` + global `beforeEach` don authentication abin da kusan kowane real app yake aiwata.