Exercices Vue Router
10 exercices progressifs pour maîtriser la navigation SPA avec Vue Router 4.
createRouter — configuration de base
Tâche : Créez un router Vue Router 4 avec createRouter et createWebHashHistory. Ajoutez 2 routes minimales. Branchez-le sur une app Vue avec app.use(router).
Routes de base — 3 routes avec path et component
Tâche : Définissez un tableau routes avec exactement 3 routes : /, /articles, /about. Chaque route doit avoir path et component.
RouterLink — navigation déclarative
Tâche : Créez un composant Nav qui utilise <RouterLink> pour naviguer vers /, /articles et /about. Pas de <a href> classiques !
RouterView — afficher le composant de la route
Tâche : Créez un composant AppLayout avec un header de navigation (RouterLink) et un <RouterView /> dans le <main>.
useRoute — lire les params de route
Tâche : Créez un composant UserPage pour la route /user/:id. Utilisez useRoute() pour lire route.params.id et l'afficher dans le template.
useRouter — naviguer avec push()
Tâche : Dans un composant LoginForm, utilisez useRouter() pour naviguer vers /dashboard avec router.push() quand l'utilisateur soumet le formulaire.
Route nommée — name + router.push({ name })
Tâche : Ajoutez name: 'home' à la route /. Naviguez ensuite avec router.push({ name: 'home' }) et avec <RouterLink :to="{ name: 'home' }">.
Navigation guard beforeEach — log de navigation
Tâche : Enregistrez un guard router.beforeEach qui affiche dans la console le chemin de départ (from.path) et le chemin d'arrivée (to.path) à chaque navigation.
Query params — ?page=1 avec useRoute().query
Tâche : Créez un composant ListePage qui lit route.query.page pour afficher le numéro de page (défaut : 1). URL exemple : /#/liste?page=3.
Routes protégées — meta.requiresAuth + guard redirection
Tâche : Ajoutez meta: { requiresAuth: true } à la route /dashboard. Créez un guard beforeEach qui redirige vers /login si l'utilisateur n'est pas authentifié.
Passer le QCM V07