Comment Vue Router gère-t-il le routage et les guards ?

Question

Accepted Answer

**Vue Router** est le routeur client officiel pour les SPAs Vue. Il mappe les URLs aux composants et les remplace **sans rechargement complet de la page**, et fournit des **guards de navigation** pour exécuter de la logique (comme les vérifications d'authentification) avant la navigation. ## Définir les 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 }); ``` ## Naviguer et lire les paramètres ```vue ``` ## Guards de navigation — exécuter de la logique avant de naviguer ```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 }); ``` Les guards reçoivent **`to`** (route cible) et **`from`** (route actuelle), et peuvent autoriser, annuler (`false`), ou rediriger (retourner une location). Le flag `meta.requiresAuth` + un `beforeEach` global est le pattern canonique pour protéger par authentification. ## Niveaux de guards ```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 ``` ## Routes imbriquées & autres fonctionnalités ```js { path: "/settings", component: Settings, children: [ { path: "profile", component: Profile }, // → /settings/profile, renders in nested ]} ``` En plus : paramètres de route, chaînes de requête, routes nommées, comportement de scroll, et composants de route chargés paresseusement pour le code splitting. ## Pourquoi c'est important Vue Router est essentiel pour toute SPA Vue multi-pages — il fournit la navigation côté client (rapide, sans rechargements), des routes dynamiques/imbriquées, et `RouterLink`/`RouterView`. Les guards de navigation sont la fonctionnalité clé pour les préoccupations transversales : protéger les routes par authentification, enregistrer les pages visitées, et empêcher la navigation quand il y a des modifications non sauvegardées. Le pattern `meta` + `beforeEach` global pour l'authentification est quelque chose que presque chaque application réelle implémente.