Le routeur officiel de Vue, nommé Vue Router, facilite la construction d’applications web monopages (SPA) avec Vue. Il permet de lier les composants de votre application à différentes adresses URL, de gérer l’historique de navigation et de configurer des options de routage avancées.
Démarrer avec Vue Router
Pour commencer à utiliser Vue Router, ouvrez votre terminal et exécutez la commande npm (Node Package Manager) suivante dans le dossier où vous souhaitez créer votre projet Vue :
npm create vue
Lorsqu’il vous sera demandé si vous souhaitez ajouter Vue Router pour le développement d’applications à page unique, répondez par l’affirmative.
Ensuite, ouvrez votre projet dans votre éditeur de code. Vous devriez trouver un dossier « router » dans le répertoire « src » de votre application.
Ce dossier contient un fichier « index.js » qui inclut le code JavaScript gérant les routes de votre application. Ce fichier importe deux fonctions du package « vue-router »: « createRouter » et « createWebHistory ».
La fonction « createRouter » crée une nouvelle configuration de routage à partir d’un objet. Cet objet possède les clés « history » et « routes », ainsi que leurs valeurs. La clé « routes » est un tableau d’objets décrivant la configuration de chaque route, comme illustré ci-dessus.
Après avoir défini vos routes, vous devez exporter l’instance du routeur et l’importer dans votre fichier « main.js » :
import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')
Vous avez importé la fonction de routage dans le fichier « main.js », puis vous avez indiqué à votre application Vue d’utiliser ce routeur grâce à la méthode « use ».
Vous pouvez ensuite appliquer vos itinéraires à votre application Vue en structurant un bloc de code similaire à celui-ci :
<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>
<template>
<header>
<nav>
<RouterLink href="https://www.makeuseof.com/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>
</nav>
</header>
<RouterView />
</template>
Ce bloc de code illustre l’utilisation du routeur Vue dans un composant Vue. Il importe deux composants de la bibliothèque « vue-router » : « RouterLink » et « RouterView ».
Les composants « RouterLink » créent des liens vers les pages « Home » et « About ». L’attribut « to » spécifie le chemin de l’itinéraire ciblé lors d’un clic sur le lien. Dans l’exemple, un lien pointe vers la route racine (« / ») et un autre vers la route « /about ».
Le composant « RouterView » affiche le composant associé à la route actuelle. Il fait office de conteneur où le contenu de l’itinéraire actif sera affiché. Lorsque vous naviguez vers un autre itinéraire, le composant associé s’affichera dans ce « RouterView ».
Ajouter des paramètres aux routes de votre application
Vue Router permet de transmettre des paramètres et des requêtes aux routes. Les paramètres sont des parties dynamiques de l’URL, indiquées par deux points « : ».
Pour que votre routeur Vue puisse capturer des paramètres dans les routes de l’application, configurez la route concernée dans votre fichier « index.js » :
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: "https://www.makeuseof.com/",
name: "home",
component: HomeView,
},
{
path: "/developer/:profileNumber",
name: "developer",
component: () => import("../views/devView.vue"),
},
],
});
Ce code présente une instance de routeur avec deux routes : « home » et « developer ». La route « developer » affiche des informations sur un développeur en particulier en fonction de son numéro de profil.
Modifiez maintenant votre fichier « App.vue » pour qu’il ressemble au code ci-dessous :
<script setup>
import { ref } from "vue";
import { RouterLink, RouterView } from "vue-router";
const developer = ref([
{
name: "Chinedu",
profile: 2110,
},
]);
</script>
<template>
<header>
<nav>
<RouterLink href="https://www.makeuseof.com/">Home</RouterLink>
<RouterLink :to="{ path: `/developer/${developer.profile}` }">
Dev Profile
</RouterLink>
</nav>
</header>
<RouterView />
</template>
Ce bloc de code définit la variable « developer » comme un objet réactif avec deux propriétés : « name » et « profile ». Ensuite, le deuxième composant « RouterLink » dirige vers le composant « devView ». Vous pouvez accéder à la valeur du paramètre transmis dans l’URL dans le bloc « template » ou « script » du composant « devView ».
Pour accéder à cette valeur dans le bloc « template » du composant « devView », Vue fournit la méthode « $route », un objet contenant des informations sur l’URL : « fullPath », les requêtes, les paramètres et les composants.
Voici un exemple d’accès au profil du développeur dans le composant « devView » avec la méthode « $route » :
<template>
<div>
<h1>This is developer {{ $route.params.profileNumber }} about page</h1>
</div>
</template>
Ce code montre comment utiliser la méthode « $route » pour afficher la valeur du paramètre « profileNumber » dans le template du composant.
La propriété « params » de la méthode « $route » contient les paramètres que vous définissez dans une route. Quand Vue affiche ce composant, il remplace la valeur de « $route.params.profileNumber » par la valeur réelle de l’URL.
Par exemple, si vous visitez « /developer/123 », le message affiché sera « This is developer 123 about page ».
Vous pouvez aussi accéder aux informations de la route dans le bloc JavaScript de votre composant. Par exemple :
<script setup>
import { useRoute } from "vue-router";
const route = useRoute();
</script>
<template>
<div>
<h1>This is developer {{ route.params.profileNumber }} about page</h1>
</div>
</template>
Dans l’ancien code, vous accédiez à l’objet « $route » directement dans le template pour récupérer les paramètres de route. Dans le code mis à jour, vous importez la fonction « useRoute() » du package « vue-router ». Vous assignez la fonction à une variable que vous utilisez ensuite dans le template de votre composant Vue.
Avec « useRoute() », vous suivez l’approche de l’API de composition de Vue 3 en utilisant le système de réactivité. Cela garantit la mise à jour automatique du composant lorsque les paramètres de la route changent.
Ajouter des requêtes aux routes de votre application
Les requêtes, ou « query strings », sont des paramètres optionnels ajoutés à l’URL après un point d’interrogation « ? ». Dans la route « /search?name=vue », « name=vue » est une requête où « name » est la clé et « vue » est la valeur.
Pour ajouter une requête à une route dans Vue Router, utilisez la propriété « query » de l’objet « to » dans le composant « RouterLink ». La propriété « query » doit être un objet où chaque paire clé-valeur représente un paramètre de requête. Exemple :
<RouterLink :to="{ name: 'home', query: {name: 'vue'}}">Home</RouterLink>
Après avoir ajouté une requête à une route, vous pouvez accéder aux paramètres de requête dans vos composants Vue, soit avec l’objet « $route », soit avec la fonction « useRoute », comme pour les paramètres de route.
Voici un exemple d’utilisation d’un paramètre de requête dans un composant :
<template>
{{ $route.query.name }}
</template>
Ce code montre comment accéder et afficher la valeur d’un paramètre de requête (« name ») de l’URL, en utilisant l’objet « $route.query » dans le template d’un composant Vue.js.
Définir une page d’erreur 404
Vue Router permet de définir une route de secours qui sera utilisée si aucune autre route ne correspond à l’URL. Cela est utile pour afficher une page « 404 Not Found ».
Voici comment définir une route de secours avec Vue Router :
{
path:'/:pathName(.*)',
name: 'NotFound',
component: () => import('../views/NotFoundView.vue')
}
La partie « /:pathName » indique un segment dynamique dans l’URL et « (.*) » est une expression régulière JavaScript qui correspond à tous les caractères après le segment dynamique. Cela permet à cette route de correspondre à n’importe quel chemin.
Quand un utilisateur accède à une URL qui ne correspond à aucune autre route, Vue affichera le composant « NotFoundView ». Vous utilisez cette approche pour gérer les erreurs 404 ou afficher une page de secours lorsqu’une route demandée est introuvable.
Apprendre à créer des animations dans Vue
Vous avez appris à ajouter des paramètres et des requêtes aux routes de votre application. Vous avez aussi appris à définir une page de secours pour gérer les erreurs 404. Vue Router offre bien d’autres fonctionnalités, comme la définition de routes dynamiques et imbriquées.
Ajouter des animations et des transitions entre les éléments d’une page web améliore l’expérience utilisateur. Apprendre à créer des transitions et des animations dans Vue est indispensable pour rendre un site web plus fluide, plus attrayant et plus performant.