Créer des applications à page unique avec une navigation fluide peut être complexe sans un outil adapté.
Les développeurs rencontrent souvent des défis liés au routage dynamique et aux transitions, ce qui peut nuire à l’expérience utilisateur.
Vue Router simplifie ces tâches en offrant des fonctionnalités puissantes pour gérer le routage et les transitions dans Vue.js, assurant une navigation optimale.
Table de matière
Vue Router : Présentation essentielleRoutage multiple avec Vue RouterMode History dans Vue RouterLazy loading : Import dynamique VueComposant navigation avec Vue.jsClasses actives des liens Vue RouterParamètres d'URL avec Vue RouterMenu {{$route.params.id}}{{menu.name}}Routes nommées en Vue.jsMenu dynamique et Vue RouterSlug dans les paramètres URLProps en routage Vue.jsLister données liées en Vue.js{{menu.name}}Détails ingrédient avec Vue Router{{ingredient.name}}Bouton retour : Vue.js SPATransitions fluides avec Vue RouterRedirection 404 : Vue RouterQuery params en Vue.jsFAQConclusion
Acquérez les compétences fondamentales pour créer des applications avec Vue JS 3!
Vue Router : Présentation essentielle
Vue Router est le routeur officiel de Vue.js. Il s’intègre profondément au cœur de Vue.js pour faciliter la création d’applications à page unique avec Vue.js. Les fonctionnalités incluent:
- Cartographie des itinéraires imbriqués
- Routage dynamique
- Configuration de routeur modulaire basée sur des composants
- Paramètres de route, requête, caractères génériques
- Afficher les effets de transition optimisés par le système de transition de Vue.js
- Contrôle de navigation précis
- Liens avec les classes CSS actives automatiques
- Mode historique HTML5 ou mode hachage
- Comportement de défilement personnalisable
- Encodage approprié pour les URL
Référence
: Vous pouvez consulter son site officiel
Vue Documentation
pour trouver
des informations détaillées.
Pour l’installer, ouvrir le terminal. Et suivre ces étapes :
Choisir « manually »,
Séléctionner « babel » et « router »,
Et suivre les instructions qui se suivent
Une fois l’installation est finie, ouvrir l’application
La route « Home »
La route « About »
Par défaut nous devons trouver ceci dans App.vue :
<template>
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
//pour créer des liens de navigation permettant aux utilisateurs de naviguer entre différentes pages ou composantes de l’application sans recharger la page.
</nav>
<router-view/> //un espace réservé où le composant correspondant à la route actuelle sera rendu
</template>
Puis ajoutons dans le balise <nav> ces contenus ainsi que le style pour obtenir une barre de navigation.
<template>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<router-link class="nav-link" to="/">Menu</router-link>|
//to: spécifie le chemin de la route cible
</li>
<li class="nav-item">
<router-link class="nav-link" to="/contact">Home</router-link>|
// le séparateur |: utilisé pour séparer visuellement les liens de navigation
</li>
<li class="nav-item">
<router-link class="nav-link" to="/about">About</router-link>
</li>
</ul>
</div>
</div>
</nav>
<router-view/>
</template>
<style></style>
Dans main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app') // .use(router):indique à l’application d’utiliser le router défini.
Router -> index.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'// importer le composant de vue pour la route d’accueil.
/* createRouter : fonction de vueJs pour créer une nouvelle instance de router.
createWebHistory : pour configurer l’historique de navigation */
const routes = [
{
path: '/', //spécifie le chemin de l’URL pour la route
name: 'home', //donne un nom à la route
component: HomeView //spécifie quel composant afficher lorsque l’URL correspond à cette route
},
{
path: '/about',
name: 'about',
component: () => import'../views/AboutView.vue')
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
AboutView.vue: un view par défaut de vue router
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
HomeView.vue
<template>
<div class="home">
<img decoding="async" alt="Vue logo" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" width="" height="" data-lazy-src="../assets/logo.png"><noscript><img decoding="async" alt="Vue logo" src="../assets/logo.png" width="" height=""></noscript>
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld.vue'// Importe le composant HelloWord
export default {
name: 'HomeView',
components: {
HelloWorld //déclare le composant HelloWord comme un sous-composant de HomeView
} //exporte le composant vue HomeView
}
</script>
Le rendu est :
Routage multiple avec Vue Router
Créons les 03 nouveaux views ci-après
KfcView.vue
<template>
<div class="kfc">
<h1>KFC</h1>
</div>
</template>
McdoView.vue
<template>
<div class="mcdo">
<h1>Mcdo</h1>
</div>
</template>
BurgerKingView.vue
<template>
<div class="bk">
<h1>Burger King</h1>
</div>
</template>
Dans HomeView.vue, ajoutons ceci
<template>
<div class="home">
<main class="container mt-4">
<div class="row row-cols-1 row-cols-md-3 g-4">
<router-link
v-for="menu in menus"//boucle à travers le tableau menus pour créer une carte pour chaque élément de menu
:key="menu.id"//assure que chaque élément de la liste a une clé unique,ce qui aide Vue à suivre les éléments lors des mis à jour
:to="menu.slug" //génère un lien dynamique vers l’URL définie par menu.slug
>
<div class="col" :key="n">
<div class="card h-100">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20420%20225'%3E%3C/svg%3E" class="card-img-top" width="420" height="225" data-lazy-src="`/images/${menu.image}`"><noscript><img loading="lazy" loading="lazy" decoding="async" src="`/images/${menu.image}`" class="card-img-top" width="420" height="225"></noscript> //génère dynamiquement le chemin de l’image à partir du nom du fichier menu.image
<div class="card-body">
<h5 class="card-title">{{menu.name}}</h5>//affiche le nom du menu dans un titre de carte.
</div>
</div>
</div>
</router-link>
</div>
</main>
</div>
</template>
<script>
import menudata from '@/data.json'
export default {
data(){
return{
menus : menudata.menus
}
}
}
</script>
Puis dans Index.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import McdoView from '../views/McdoView.vue'
import KfcView from '../views/KfcView.vue'
import BurgerKingView from '../views/BurgerKingView.vue'
// important des composants qui seront utilisés comme vue pour différentes routes
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/menu-mcdo',
name: 'mcdo', //cette route est nommée « mcdo »
component: McdoView
},
{
path: '/menu-kfc',
name: 'kfc',
component: KfcView
},
{
path: '/menu-burger-king',
name: 'bk',
component: BurgerKingView
},
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
Mode History dans Vue Router
Pour mieux comprendre le mode History avec Vue Router, rendez-vous sur son site officiel Vue Documentation puis scrollez jusqu’à trouver « Different History modes »
Vue Router comprends deux (02) types de mode History :
Lazy loading : Import dynamique Vue
Rendre dans index.js pour ajouter les routes du menu :
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
// import McdoView from '../views/McdoView.vue'
// import KfcView from '../views/KfcView.vue'
// import BurgerKingView from '../views/BurgerKingView.vue'
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/menu-mcdo',
name: 'mcdo',
component: () => import('@/views/McdoView.vue')
},
{
path: '/menu-kfc',
name: 'kfc',
component: () => import('@/views/KfcView.vue')
},
{
path: '/menu-burger-king',
name: 'bk',
component: () => import('@/views/BurgerKingView.vue')
},
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
Donc voilà l’explication :
Composant navigation avec Vue.js
Créez un composant « HeadNavigation.vue » et déplacez le balise <nav> de App.vue dedans
<template>
<div>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<router-link class="nav-link" to="/">Menu</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" to="/contact">Home</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" to="/menu-mcdo">Mcdo</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" to="/menu-kfc">KFC</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" to="/menu-burger-king">Burger King</router-link>
</li>
</ul>
</div>
</div>
</nav>
</div>
</template>
Puis ajuster ceci dans App.vue
<template>
<HeadNavigation/>//inclut le composant HeadNavigation qui contient la barre de navigation
<router-view/>
</template>
<script>
import HeadNavigation from './components/HeadNavigation.vue'//importe le composant HeadNavigation
export default {
components : {HeadNavigation},//déclare HeadNavigation comme un composant utilisé dans ce fichier Vue
}
</script>
<style></style>
Donc, le rendu pour la navigation ne change pas mais nous voulons juste libérer un peu le App.vue et nous pouvons appeler ce nouveau composant n’importe où.
Classes actives des liens Vue Router
Mettez dans index.js une classe pour les liens
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
linkActiveClass : "lien-actif", //spécifie la classe CSS a appliquer aux liens actifs dans la barre de navigation.Lorsqu’un lien est actif, il recevra cette classe CSS.
})
Ajoutez son style dans le composant « HeadNavigation »
<style scoped></style>
Voilà le rendu :
Paramètres d'URL avec Vue Router
Créez un nouveau view « MenuView »
<template>
<div>
<!-- Menu view -->
<!-- <h2 id="menu-routeparamsid" class="rb-heading-index-13">Menu {{$route.params.id}}</h2> -->
<h2 id="menuname" class="rb-heading-index-14">{{menu.name}}</h2> // affiche le nom du menu à partir des données récupérées
<div>
<img :src="`/images/${menu.image}`" :alt="menu.name" width="" height="">
<p>{{menu.description}}</p> // affiche la description du menu
</div>
</div>
</template>
<script>
import menuData from '@/data.json' //importe les données du menu depuis un fichier JSON
export default {
computed:{
menuId(){//pour récupérer l’ID du menu à partir des paramètres de la route
return parseInt(this.$route.params.id)
},
menu(){HeadNavigation// utilise l’ID du menu récupéré pour trouver et retourner l’objet menu correspondant à partir du menuData.menus
return menuData.menus.find(menu => menu.id === this.menuId)
}
}
}
</script>
Dans HomeView.vue, ajoutez ce script :
<script>
import menuData from '@/data.json'
export default {
data(){// une méthode qui contient les données de l’état local du composant
return{
menus : menuData.menus
}
}
}
</script>
Routes nommées en Vue.js
Dans index.js, ajoutez le name pour la route « id »
{
path: '/menu/:id',
name: 'menu.show',
component: () => import('@/views/MenuView.vue')
}
Dans HomeView.vue, changez le « to »
<router-link
v-for="menu in menus"// directive qui itère sur chaque élément(menu) dans le tableau menus
:key="menu.id" // utilise comme clé pour identifier de manière efficace chaque élément dans la liste
:to="{
name: 'menu.show',
params: {id: menu.id}//génère des liens vers des routes dynamiques basées sur l’ID de chaque menu
}"
>
Quand nous cliquons sur un lien de la navigation, le nom de l’URL lui correspond directement
Menu dynamique et Vue Router
D’abord, commentez les routes pour Mcdo, KFC, Burger king dans « index.js »
Rendons dans HomeView
Dans le HeadNavigation, commentez les balises <li>, puis copiez là le <router-link> et le <script> de HomeView
<template>
<div>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<!-- <li class="nav-item">
<router-link class="nav-link" to="/">Menu</router-link>
</li> -->
<!-- <li class="nav-item">
<router-link class="nav-link" to="/contact">Home</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" to="/menu-mcdo">Mcdo</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" to="/menu-kfc">KFC</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" to="/menu-burger-king">Burger King</router-link>
</li> -->
<router-link
v-for="menu in menus"
:key="menu.id"
:to="{
name: 'menu.show',
params: {id: menu.id}
}">// définit la destination du lien vers la route nommée « menu.show »
<li class="nav-item">
{{menu.name}} |
</li>
</router-link>
</ul>
</div>
</div>
</nav>
</div>
</template>
<script>
import menuData from '@/data.json'
export default {
data(){
return{
menus : menuData.menus
}
}
}
</script>
<style scoped></style>
Voilà le menu dynamique
Slug dans les paramètres URL
Ajoutez dans Index.js
{
path: '/menu/:id/:slug', //définit le modèle d’URL pour la route
name: 'menu.show',
component: () => import('@/views/MenuView.vue')
}
Dans Homeview.vue
<router-link
v-for="menu in menus"//boucle sur une liste de menus
:key="menu.id"
:to="{
name: 'menu.show',
params: {id: menu.id, slug:menu.slug}
}" //définit la route cible pour le lien, elle utilise ici la route « menu.show » et passe l’id et le slug en tant que paramètres pour générer l’URL approprié
>
Et HeadNavigation.vue
:to="{
name: 'menu.show',
params: {id: menu.id, slug:menu.slug}
}">
Props en routage Vue.js
Dans index.js, définir dans la route de menu la props :
{
path: '/menu/:id/:slug',
name: 'menu.show',
component: () => import('@/views/MenuView.vue'),
props:(route) => ({id: parseInt(route.params.id)}),//une fonction pour mapper les paramètres de la route en propriétés du composant. Cela signifie que l’id sera automatiquement passe en tant que propriété au composant MenuView.vue
}
Dans MenuView.vue, supprimez la fonction menu et remplacez par « props »
<script>
import menuData from '@/data.json'
export default {
props:{
id: {type: Number, required: true},
},//déclare une propriété id de type Number qui est requise
computed:{
menu(){
return menuData.menus.find(menu => menu.id ===this.id)
}
}//la propriété calculée menu utilise l’id recu pour rechercher et renvoyer l’élément de menu correspondant dans menuData.menus
}
</script>
Le rendu est de même que le précédent.
Lister données liées en Vue.js
Créez un nouveau composant « IngredientList.vue »
<template>
<div class="card" style="width: 18rem;">
<img :src="`/images/${ingredient.image}`"
:alt="ingredient.name"
class="card-img-top" width="" height="">
<div class="card-body">
<h5 class="card-title">{{ingredient.name}}</h5>
</div>
</div>
</template>
<script>
export default {
props:{
ingredient:{type: Object, required: true},
}
}
</script>
<style scoped></style>
Dans menuView.vue :
<template>
<div>
<h2 id="menuname" class="rb-heading-index-14">{{menu.name}}</h2>
<div>
<img :src="`/images/${menu.image}`" :alt="menu.name" width="" height="">
<p>{{menu.description}}</p>
</div>
<div class="ingredients">
<IngredientList
v-for="ingredient in menu.ingredients"
:key="ingredient.slug"
:ingredient="ingredient"
/>
</div>
</div>
</template>
<script>
import menuData from '@/data.json'
import IngredientList from '@/components/IngredientList.vue'
export default {
props:{
id: {type: Number, required: true},
},
computed:{
menu(){
return menuData.menus.find(menu => menu.id === this.id)
}
},
components: {IngredientList},
}
</script>
<style></style>
Le rendu est :
Détails ingrédient avec Vue Router
Créez un nouveau view « IngredientView.vue »
<template>
<div>
<h2 id="ingredientname" class="rb-heading-index-23">{{ingredient.name}}</h2>
<div>
<img :src="`/images/${ingredient.image}`" :alt="ingredient.name" width="" height="">
<p>{{ingredient.description}}</p>
</div>
</div>
</template>
<script>
import menuData from '@/data.json'
export default {
props:{
id:{type: Number, required: true},
slug: {type: String, required: true},
},//prend id et slug comme propriétés pour identifier l’ingrédient
computed:{
menu(){
return menuData.menus.find(menu => menu.id === this.id)
},//recherche le menu correspondant à l’id fourni
ingredient(){
return this.menu.ingredients.find(
ingredient => ingredient.slug === this.slug )
}//recherche l’ingrédient correspondant au slug dans le menu identifié
}
Ajoutez une nouvelle route dans index.js
{
path: '/ingredient/:id/:slug',//utilise id et slug pour passer les informations nécessaires à la vue
name: 'ingredient.show',
component: () => import('@/views/IngredientView.vue'),
props:(route) => ({id: parseInt(route.params.id), slug: route.params.slug}),
}
Bouton retour : Vue.js SPA
Créons un nouveau composant « Back.vue »
<template>
<div>
<button @click="$router.back()" class="btn btn-primary"></button>
</div>//un bouton qui utilise l’évènements click pour appeler la méthode $router.back.
</template>
Importez ce-dernier dans MenuView.vue et IngredientView.vue
import Back from '@/components/Back.vue'
Il affiche un simple bouton,permettant de revenir à la page précédente dans l’historique du navigateur.
Transitions fluides avec Vue Router
Transition : Vue propose deux composants natifs qui peuvent aider à travailler avec des transitions et des animations en réponse à un changement d’état : <Transition> pour appliquer des animations lorsqu’un élément ou un composant entre et sort du DOM . Trouvez là dans le site officiel de vue router, puis « transitions ».
Dans App.vue, ajoutez ce code :
<template>
<HeadNavigation/>
<div class="container">
<router-view v-slot="{component}">//pour extraire le composant actuel de la route. Dans ce cas, il récupère l’objet component de la route active
<!-- <transition :name="slide-fade"> -->
<!-- <transition name="bounce"> -->
<transition :name="$route.meta.transition">//lie dynamiquement le nom de la transition à la propriété transition dans les métadonnées de la route actuelle ;qui permet d’appliquer différentes animations de transition en fonction de la route
<component :is="component" :key="$route.path"></component>//rendu dynamique du composant
</transition>
<router-view/>
</div>
</template>
Dans index.js
const routes = [
{
path: '/',
name: 'home',
component: HomeView,
meta: {Transition: 'bounce'},//les métadonnées associées à la route, transition :’bounce’ signifie que lorsque cette est active la transition nommée « bounce » sera utilisée pour l’animation.
},
Créer un view « NotFound »
<template>
<div>
<h1>Page non trouvée</h1>
<p>Revenir à la <router-link to="/">Page d'accueil</router-link></p>
</div>
</template>
Dans index.js : Importez ce composant
import NotFound from '../views/NotFoundView.vue'
Créez une nouvelle route contenant :
{
path: "/:catchAll(.*)",//cette route utilise une expression régulière pour capturer toutes les routes qui ne correspondent a aucune des routes définies précédemment.
component: NotFound//le composant NotFoundView sera rendu pour toutes les routes non définies.
}
Redirection 404 : Vue Router
Dans index.js
Ajoutez ceci juste dans la route pour le « menu »
beforeEnter(to, from){ //une fonction de garde qui est appelée avant que la
navigation vers cette route ne confirmée qui prend les arguments :to,from,next
const urlExists = menuData.menus.find(menu => menu.id === parseInt(to.params.id)) //cherche un menu avec un id correspond à l’ID dans l’URL
if(!urlExists) return{redirect: {name:'home'}}
}//si aucun menu avec cet ID n’est trouvé,la navigation est redirigée vers la page d’accueil.
Il y a rédirection automatique vers home quand l’URL n’existe pas.
Query params en Vue.js
Dans Menu.vue
Créez une méthode
methods:{
getQueryParams(){//cette méthode utilise console.log pour afficher les paramètres de requete dans la console de navigateur.
console.log(this.$route.query);
}//this.$route: objet fourni par vue router, qui contient des informations sur la route actuelle.
}//query : une propriété qui est un objet contenant tous les paramètres de requete actuels de l’URL.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Qu'est-ce que Vue Router ?
Vue Router est le routeur officiel pour Vue.js, conçu pour simplifier le routage dans les applications à page unique (SPA). Il s’intègre parfaitement à Vue.js en offrant des fonctionnalités comme le routage dynamique, les itinéraires imbriqués et une gestion précise de la navigation. Cela permet aux développeurs de construire des applications robustes avec des transitions fluides entre les différentes vues sans recharger la page.
Comment configurer Vue Router ?
Pour configurer Vue Router, vous devez d’abord l’installer via le terminal. Ensuite, importez et configurez les itinéraires dans votre fichier `index.js`. Vous pouvez créer des routes dynamiques en définissant les chemins et les composants associés. Enfin, intégrez le routeur dans votre application Vue en utilisant `createApp(App).use(router).mount(‘#app’)` pour activer le routage dans l’application.
Quels sont les modes de Vue Router ?
Vue Router propose deux modes principaux : le mode hachage et le mode historique. Le mode hachage utilise un caractère dièse (#) dans l’URL, ce qui est compatible avec la plupart des serveurs sans configuration supplémentaire. Le mode historique, quant à lui, utilise l’API History de HTML5 pour des URLs plus propres, mais nécessite une configuration serveur adaptée pour fonctionner correctement.
Comment créer des transitions avec Vue Router ?
Pour créer des transitions avec Vue Router, utilisez le composant `` de Vue. Vous pouvez définir différentes animations pour l’entrée et la sortie des composants lors du changement de route. Il suffit de spécifier le nom de la transition dans les métadonnées de la route et d’appliquer les styles CSS nécessaires pour animer les composants lors de leur rendu ou retrait du DOM.
Comment utiliser les routes dynamiques et les props ?
Les routes dynamiques dans Vue Router permettent de créer des chemins avec des paramètres variables, comme `/menu/:id`. Ces paramètres peuvent être passés en tant que props aux composants en utilisant une fonction de mappage dans la configuration de la route. Cela facilite l’accès aux paramètres d’URL directement dans le composant, permettant un rendu conditionnel basé sur ces valeurs.
Conclusion
L’intégration de Vue Router dans vos projets Vue.js peut transformer votre approche du routage et améliorer l’expérience utilisateur de vos applications SPA. Quelles autres fonctionnalités de Vue Router aimeriez-vous explorer pour enrichir vos applications ?
