Routes imbriquées et dynamiques
Créez des mises en page imbriquées et des paramètres de route dynamiques
Routes imbriquées et dynamiques est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 2 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.
Au-delà des routes statiques
Les applications réelles ont besoin de routes qui transportent des données et s’imbriquent dans des mises en page.
- Les segments dynamiques capturent des valeurs comme un identifiant
- Les routes imbriquées affichent les routes enfants à l’intérieur d’une route parente
- Les routes nommées et la navigation programmée offrent davantage de souplesse
Segments de route dynamiques
Deux-points définit un segment dynamique qui correspond à n’importe quelle valeur.
const routes = [
{ path: "/user/:id", component: UserProfile }
]
// Matches /user/1, /user/42, /user/abcAccéder à route.params
Lisez la valeur capturée via route.params.
<script setup>
import { useRoute } from "vue-router"
const route = useRoute()
console.log(route.params.id)
</script>Réagir aux modifications des paramètres
Lorsque seul le paramètre change (par exemple, de /user/1 à /user/2), le composant est réutilisé. Surveillez le paramètre pour recharger les données.
import { watch } from "vue"
import { useRoute } from "vue-router"
const route = useRoute()
watch(() => route.params.id, (newId) => {
loadUser(newId)
})Plusieurs segments dynamiques
Les routes peuvent comporter plusieurs parties dynamiques.
const routes = [
{ path: "/user/:userId/post/:postId", component: Post }
]
// route.params.userId and route.params.postIdRoutes imbriquées
Les routes imbriquées permettent aux routes enfants de s’afficher à l’intérieur d’un composant parent.
const routes = [
{
path: "/user/:id",
component: UserLayout,
children: [
{ path: "profile", component: Profile },
{ path: "posts", component: Posts }
]
}
]Affichage du routeur imbriqué
Le composant parent a besoin de son propre composant d’affichage du routeur pour afficher les routes enfants.
<!-- UserLayout.vue -->
<template>
<h1>User</h1>
<router-view></router-view>
</template>
<!-- /user/1/profile renders Profile here -->Routes nommées
Attribuez un nom à une route pour pouvoir la référencer sans coder son chemin en dur.
const routes = [
{
path: "/user/:id",
name: "user",
component: UserProfile
}
]Créer un lien par nom
Un lien du routeur peut cibler une route nommée et transmettre les paramètres sous forme d’objet.
<router-link
:to="{ name: 'user', params: { id: 42 } }"
>
View User
</router-link>Navigation programmée
Naviguez depuis JavaScript avec la méthode push du routeur.
import { useRouter } from "vue-router"
const router = useRouter()
function goToUser(id) {
router.push({ name: "user", params: { id } })
}Autres méthodes de navigation
Le routeur propose d’autres fonctions d’aide à la navigation :
- router.push ajoute une nouvelle entrée à l’historique
- router.replace navigue sans ajouter de nouvelle entrée à l’historique
- router.back revient à la page précédente
Vérification rapide
Vérifiez votre compréhension des routes dynamiques et imbriquées.
Récapitulatif : routes imbriquées et dynamiques
Vous avez appris les notions avancées du routage :
- Les segments dynamiques (/user/:id) sont capturés dans route.params
- Les routes imbriquées utilisent children et un affichage du routeur imbriqué
- Les routes nommées permettent de créer des liens par nom
- router.push assure la navigation programmée
Ensuite : les gardes de navigation.
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 « Routes imbriquées et dynamiques » est-elle gratuite ?
Oui — le texte complet de « Routes imbriquées et dynamiques » 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 « Routes imbriquées et dynamiques » ?
Créez des mises en page imbriquées et des paramètres de route dynamiques 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 2 sur 3.
Combien de temps prend la leçon « Routes imbriquées et dynamiques » ?
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