Cum gestionează Vue Router rutarea și gardurile?

Question

Accepted Answer

**Vue Router** este rutorul oficial pe partea de client pentru Vue SPA-uri. Mapează URL-uri la componente și le schimbă **fără reîncărcări complete de pagină**, și oferă **garduri de navigare** pentru a executa logică (cum ar fi verificări de autentificare) înainte de navigare. ## Definirea rutelor ```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 }); ``` ## Navigare și citire parametri ```vue ``` ## Garduri de navigare — execută logică înainte de navigare ```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 }); ``` Gardurile primesc **`to`** (ruta țintă) și **`from`** (curent) și pot permite, anula (`false`) sau redirecționa (returnând o locație). Flagul `meta.requiresAuth` + un `beforeEach` global este modelul canonic de autentificare. ## Niveluri de garduri ```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 ``` ## Rute imbricate și alte caracteristici ```js { path: "/settings", component: Settings, children: [ { path: "profile", component: Profile }, // → /settings/profile, renders in nested ]} ``` Plus: parametri de rută, șiruri de interogare, rute numite, comportament de derulare și componente de rută încărcate leneș pentru împărțirea codului. ## De ce este important Vue Router este esențial pentru orice Vue SPA cu mai multe pagini — oferă navigare pe partea de client (rapidă, fără reîncărcări), rute dinamice/imbricate și `RouterLink`/`RouterView`. Gardurile de navigare sunt caracteristica cheie pentru preocupări transversale: limitarea rutelor protejate prin autentificare, înregistrarea vizualizărilor de pagină și prevenirea navigării din formulare neapărate. Modelul `meta` + `beforeEach` global pentru autentificare este ceva pe care aproape fiecare aplicație reală o implementează.