Le routage dynamique dans Nuxt.js est l’une de ses fonctionnalités les plus puissantes. Il simplifie grandement la gestion des routes dans une application web, en générant automatiquement des routes en fonction de la structure du dossier pages.
Comment fonctionne le routage dynamique dans Nuxt.js ?
Dans Nuxt.js, le routage est géré automatiquement par la structure des fichiers dans le dossier pages/.
Nuxt crée des routes en fonction de la structure du répertoire, mais il propose également des routes dynamiques grâce à l’utilisation de paramètres.
Exemple basique de routage dynamique :
Imaginons que nous avons un fichier nommé pages/post/_id.vue dans notre projet. Le _id ici indique que c’est un paramètre dynamique.
Route : /post/:id
Composant : pages/post/_id.vue
Utilisation des paramètres dynamiques
Lorsque nous définissons une route avec un paramètre dynamique (comme _id), Nuxt va automatiquement extraire ce paramètre de l’URL et nous permettre de l’utiliser dans notre composant.
Exemple :
Le fichier pages/post/_id.vue sera utilisé pour toutes les URLs qui correspondent au modèle /post/:id.
route.params.id extrait la valeur du paramètre id de l’URL et l’affiche dans le composant.
Routes avec plusieurs paramètres dynamiques
Tu peux utiliser plusieurs paramètres dynamiques dans tes routes. Par exemple, si tu veux afficher un article d’un auteur spécifique, tu pourrais avoir un fichier pages/blog/_author/_id.vue, où tu récupères à la fois l’auteur et l’id de l’article.
Exemple :
Si l’URL est /blog/john/123, Nuxt correspondra à pages/blog/_author/_id.vue avec les paramètres author et id.
Résumé du routage dynamique dans nuxt.js
Automatique et facile à configurer grâce à la structure du dossier pages/.
Paramètres dynamiques : Utilisation des _param.vue pour les routes dynamiques.
Query params : Récupération facile des paramètres de requête avec route.query.
Routes imbriquées : Possibilité de créer des routes hiérarchiques.
SSR/SSG optimisés avec récupération de données avant le rendu.
Le routage dynamique dans Nuxt.js simplifie énormément la gestion des routes et permet de créer des applications très flexibles et performantes.