Gardes de navigation
Protégez les routes et exécutez une logique lors de la navigation avec des gardes
Gardes de navigation est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 3. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 3 leçons au total.
Que sont les gardes de navigation ?
Les gardes de navigation permettent d’exécuter du code avant, pendant ou après une modification de route.
- Bloquer ou rediriger la navigation
- Vérifier l’authentification
- Confirmer avant de quitter une page
Types de gardes
Il existe trois niveaux de gardes :
- Les gardes globales s’exécutent pour chaque navigation
- Les gardes par route s’exécutent pour une route précise
- Les gardes dans le composant s’exécutent à l’intérieur d’un composant
La garde globale beforeEach
router.beforeEach s’exécute avant chaque navigation. Elle reçoit les routes cible et actuelle.
router.beforeEach((to, from) => {
console.log("going to", to.path)
// return true to allow,
// or a route to redirect
})Autoriser ou rediriger
Dans Vue Router 4, retournez une valeur pour contrôler le déroulement.
- Retournez true ou rien pour autoriser
- Retournez false pour annuler
- Retournez un emplacement de route pour rediriger
router.beforeEach((to) => {
if (to.meta.requiresAuth && !isLoggedIn()) {
return { name: "login" }
}
return true
})Champs de métadonnées des routes
Ajoutez des données personnalisées aux routes, comme requiresAuth, puis lisez-les dans les gardes.
const routes = [
{
path: "/dashboard",
component: Dashboard,
meta: { requiresAuth: true }
}
]Une garde d’authentification
Un schéma courant consiste à protéger les routes en vérifiant l’authentification dans une garde globale.
router.beforeEach((to) => {
const authed = localStorage.getItem("token")
if (to.meta.requiresAuth && !authed) {
return { name: "login", query: { redirect: to.fullPath } }
}
})beforeEnter par route
beforeEnter protège directement une seule route dans sa définition.
const routes = [
{
path: "/admin",
component: Admin,
beforeEnter: (to, from) => {
return isAdmin() ? true : { name: "home" }
}
}
]Gardes dans les composants
Les composants peuvent définir leurs propres gardes. onBeforeRouteLeave s’exécute lors d’une navigation vers une autre page.
import { onBeforeRouteLeave } from "vue-router"
onBeforeRouteLeave((to, from) => {
if (hasUnsavedChanges.value) {
return window.confirm("Leave without saving?")
}
})onBeforeRouteUpdate
onBeforeRouteUpdate s’exécute lorsque la route change, mais que le même composant est réutilisé (modification d’un paramètre).
import { onBeforeRouteUpdate } from "vue-router"
onBeforeRouteUpdate((to) => {
loadUser(to.params.id)
})La fonction de rappel suivante (style classique)
Les anciens codes utilisent un troisième argument, suivant, pour contrôler la navigation. Retourner une valeur est désormais préférable.
// Classic style with next()
router.beforeEach((to, from, next) => {
if (canAccess(to)) {
next() // proceed
} else {
next("/login") // redirect
}
})Valeur de retour ou fonction suivante
Deux styles, un même objectif :
- Retourner une valeur (moderne et plus clair) : true, false ou un emplacement
- Appeler la fonction suivante (classique) : continuer ou rediriger
Ne mélangez pas ces deux styles dans la même garde. Le style avec valeur de retour est recommandé pour le nouveau code.
Vérification rapide
Vérifiez votre compréhension des gardes de navigation.
Récapitulatif : gardes de navigation
Vous avez appris à contrôler la navigation :
- La garde globale beforeEach s’exécute pour chaque route
- Retournez true pour autoriser, false pour annuler ou un emplacement pour rediriger
- Les champs de métadonnées comme requiresAuth déclenchent les vérifications d’authentification
- beforeEnter protège une seule route
- Les gardes dans les composants, comme onBeforeRouteLeave, gèrent le départ
Vous avez terminé le cours fondamental sur Vue.js !
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 42
- Leçons
- 156
Questions Fréquemment Posées
La leçon « Gardes de navigation » est-elle gratuite ?
Oui — le texte complet de « Gardes de navigation » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 3 leçons au total.
Qu'est-ce que j'apprendrai dans « Gardes de navigation » ?
Protégez les routes et exécutez une logique lors de la navigation avec des gardes Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Vue Academy ?
Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 3.
Combien de temps prend la leçon « Gardes de navigation » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?
Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Configurer Vue Router
- Routes imbriquées et dynamiques
- Gardes de navigation