Hogyan kezeli a Vue Router az útválasztást és a guardokat?

Question

Accepted Answer

A **Vue Router** a Vue SPA-k hivatalos kliens oldali útválasztója. Az URL-eket komponensekhez képezi le és azokat lecseréli **teljes oldal újratöltés nélkül**, valamint **navigation guardokat** biztosít, hogy logikát futtathassunk (például auth ellenőrzéseket) az útválasztás előtt. ## Útvonalak definiálása ```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 }); ``` ## Útválasztás és paraméterek olvasása ```vue ``` ## Navigation guardok — logika futtatása az útválasztás előtt ```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 }); ``` A guardok megkapják a **`to`** (cél útvonal) és **`from`** (jelenlegi) paramétereket, és engedélyezhetik, törlhetik (`false`) vagy átirányíthatják az útválasztást (egy lokáció visszaadása). A `meta.requiresAuth` jelző + egy globális `beforeEach` a kanonikus auth-gating minta. ## Guard szintek ```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 ``` ## Beágyazott útvonalak és egyéb funkciók ```js { path: "/settings", component: Settings, children: [ { path: "profile", component: Profile }, // → /settings/profile, renders in nested ]} ``` Plusz: útvonal paraméterek, query stringek, elnevezett útvonalak, scroll viselkedés és lustán betöltött route komponensek a kódfelosztáshoz. ## Miért számít A Vue Router elengedhetetlen bármely több oldalas Vue SPA-hoz — kliens oldali útválasztást (gyors, nincs újratöltés), dinamikus/beágyazott útvonalakat és `RouterLink`/`RouterView` komponenseket biztosít. A navigation guardok a kulcs funkció a keresztfeladatokhoz: védett útvonalak auth szerinti korlátozása, oldalnézet-naplózás és az útvonalváltoztatás megakadályozása nem mentett formák esetén. A `meta` + globális `beforeEach` minta az autentikációhoz szinte minden valós alkalmazásban megtalálható.