Aller au contenu
Projet de développement SGBD

Vue router

Vue Router

Introduction

Dans ce chapitre, nous allons explorer Vue Router, une bibliothèque de routage pour les applications Vue.js. Vue Router permet de gérer la navigation au sein d'une application Vue en utilisant des routes. Cela signifie que vous pouvez créer des URL spécifiques pour chaque vue de votre application et naviguer entre elles de manière fluide et sans rechargement de la page. La navigation sera entièrement régie par Vue Router en JavaScript.

L'installation de Vue Router se fait avec la commande npm install vue-router@4 s’il n’est pas déjà installé dans le projet.

Une fois que Vue Router est installé, nous allons adapter notre projet existant pour l'utiliser.

https://router.vuejs.org/

Utilisation de Vue Router

Nous allons d’abord voir un exemple simple d’application qui utilise Vue Router. Ensuite, nous verrons comment adapter notre projet pour l’utiliser étape par étape.

Configuration de Vue Router

Voici un exemple de configuration de routes pour un projet simple :

import { createRouter, createWebHistory } from 'vue-router';
import Home from './pages/Home.vue';
import About from './pages/About.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: About,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

Dans cet exemple, nous avons défini deux routes : une pour la page d'accueil ("/") et une pour la page "À Propos" ("/about"). Chaque route est associée à un composant Vue correspondant.

RouterView

Le composant RouterView est un composant fourni par Vue Router qui sert de point d'entrée pour afficher les composants correspondants aux routes de votre application.

Lorsque vous définissez des routes avec Vue Router, chaque route est associée à un composant spécifique. Lorsque l'URL de votre application correspond à une route spécifique, le composant associé à cette route sera rendu dans le RouterView.

En d'autres termes, le RouterView est l'endroit où le contenu dynamique de votre application sera affiché en fonction de la route actuelle. Lorsque l'URL change, le RouterView est mis à jour automatiquement pour afficher le composant correspondant à la nouvelle route.

Par exemple, si vous avez une route pour la page d'accueil et une autre route pour la page "À Propos", vous pouvez définir votre RouterView dans le fichier App.vue comme suit :

<script setup>
import { RouterView, RouterLink } from 'vue-router';
</script>

<template>
 <div id="app">
    <nav>
      <ul>
        <li>
          <RouterLink to="/">Accueil</RouterLink>
        </li>
        <li>
          <RouterLink to="/about">À Propos</RouterLink>
        </li>
      </ul>
    </nav>

    <RouterView>
  </div>
</template>

Lorsque l'URL de votre application est /, le composant associé à la route de la page d'accueil sera rendu dans le RouterView. Si l'URL est /about, le composant associé à la route de la page "À Propos" sera rendu à la place.

En utilisant le RouterView, vous pouvez facilement gérer la navigation entre les différentes vues de votre application en fonction des routes définies avec Vue Router.

Les RouterLink sont des composants fournis par Vue Router qui permettent de créer des liens de navigation dans une application Vue utilisant Vue Router.

Les RouterLink servent à remplacer les balises <a> traditionnelles utilisées pour créer des liens HTML. Ils sont spécialement conçus pour fonctionner avec Vue Router et offrent des fonctionnalités supplémentaires. Attention, vous ne devez pas les utiliser pour les liens vers d’autres sites que votre application (exemple : les liens vers les réseaux sociaux)

Lorsque vous utilisez un RouterLink, vous spécifiez l'URL cible du lien en utilisant la prop to. Lorsque le lien est cliqué, Vue Router se charge de naviguer vers l'URL spécifiée et de rendre le composant correspondant dans le RouterView.

Adaptation du projet

La première étape consiste à créer un dossier "pages" dans lequel nous placerons deux fichiers : Home.vue et About.vue. Ces fichiers représenteront les vues que nous afficherons dans notre application.

Pages

Home.vue

<script setup>
import { RouterLink } from 'vue-router';
</script>

<template>
  <div class="bg-gray-100 py-12">
    <div class="container mx-auto text-center">
      <h1 class="text-4xl font-bold mb-4">Bienvenue sur Mon Site Web</h1>
      <p class="text-lg mb-6">
        Votre source fiable d'informations et de ressources en ligne.
      </p>
      <RouterLink
        to="/about"
        class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-lg"
      >
        En savoir plus sur nous
      </RouterLink>
    </div>
  </div>
</template>

Le fichier Home.vue représente la vue d'accueil de notre application. Il affiche un titre accrocheur ainsi qu'une brève description de notre site. De plus, il contient un lien vers la vue "À Propos" de notre application.

About.vue

<template>
  <div class="container mx-auto py-12 px-4">
    <h2 class="text-3xl font-bold mb-6">À Propos de Nous</h2>
    <p class="text-lg mb-4">
      Nous sommes une équipe dévouée de professionnels passionnés par la création
      de contenu informatif et utile en ligne. Notre objectif est de vous fournir
      des informations précises, des conseils pratiques et des ressources de haute
      qualité pour vous aider dans votre vie quotidienne et professionnelle.
    </p>
    <p class="text-lg mb-4">
      Que vous recherchiez des tutoriels, des actualités, des analyses
      approfondies ou des astuces pratiques, notre site est conçu pour répondre à
      vos besoins. Nous mettons l'accent sur la clarté, la fiabilité et la
      pertinence de nos contenus pour vous offrir une expérience exceptionnelle.
    </p>
    <p class="text-lg">
      Nous sommes fiers de notre engagement envers l'excellence éditoriale et
      notre désir de vous fournir des informations qui vous aident à prendre des
      décisions éclairées. Explorez notre site et découvrez tout ce que nous avons
      à offrir.
    </p>
  </div>
</template>

Le fichier About.vue représente la vue "À Propos" de notre application. Il affiche des informations sur notre équipe et notre engagement à fournir un contenu de qualité.

Layout

Nous allons maintenant modifier le layout de notre application pour améliorer la structure et l'apparence générale. Pour cela, nous allons créer un dossier "Layout" et y placer le fichier Layout.vue. Assurez-vous de supprimer l'ancien fichier du dossier "components".

Layout.vue

<script setup>
import Nav from '../components/Nav.vue';
import Footer from '../components/Footer.vue';
</script>

<template>
  <div class="flex flex-col min-h-screen">
    <header>
      <Nav />
    </header>

    <main class="flex-grow pb-5 pt-24">
      <div class="container mx-auto px-4">
        <slot />
      </div>
    </main>

    <Footer />
  </div>
</template>

Le fichier Layout.vue représente le layout de notre application. Il utilise les composants Nav et Footer pour afficher une barre de navigation en haut et un pied de page en bas. Le contenu principal de chaque vue sera inséré à l'emplacement du <slot />.

Nous avons modifié les chemins d’importation des composants Nav et Footer puisque le Layout se trouve maintenant dans le dossier layouts.

Nous actualiserons l'importation du layout dans le fichier App.vue par la suite.

App.vue

Voici le code modifié du fichier App.vue :

<script setup>
import Layout from './layouts/Layout.vue';
import { RouterView } from 'vue-router';
</script>

<template>
  <Layout>
    <RouterView />
  </Layout>
</template>

Dans ce code, nous avons importé le composant Layout à partir du fichier Layout.vue situé dans le dossier "layouts". Nous avons également importé le composant RouterView de Vue Router.

Ensuite, nous avons utilisé le composant Layout comme conteneur principal de notre application. À l'intérieur du Layout, nous avons ajouté le composant RouterView qui sera utilisé pour afficher le contenu de chaque vue en fonction de la route actuelle.

Cette structure nous permet d'avoir un layout global pour notre application, avec le contenu spécifique de chaque vue rendu dans le RouterView.

Nous allons devoir modifier le composant Nav.vueet le composant NavLink.vue.

Voici le code modifié du composant Nav.vue utilisant les RouterLink :

<script setup>
import NavLink from './NavLink.vue';
import { RouterLink } from 'vue-router';
import { ref } from 'vue';

const isMenuOpen = ref(false);
</script>

<template>
  <nav class="bg-gray-900 fixed top-0 w-full z-50">
    <div class="container mx-auto flex items-center justify-between p-4">
      <RouterLink class="text-white text-lg font-bold" to="/">Mon site</RouterLink>
      <button
        class="text-white md:hidden focus:outline-none"
        @click="isMenuOpen = !isMenuOpen"
        aria-controls="navbarCollapse"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <svg
          class="w-6 h-6"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M4 6h16M4 12h16m-7 6h7"
          ></path>
        </svg>
      </button>
      <div :class="{'block': isMenuOpen, 'hidden': !isMenuOpen}" class="w-full md:w-auto md:flex md:items-center">
        <ul class="flex flex-col md:flex-row items-center space-y-4 md:space-y-0 md:space-x-6">
          <NavLink url="/" text="Accueil" />
          <NavLink url="/about" text="À propos" />
        </ul>
      </div>
    </div>
  </nav>
</template>

Et voici le code modifié du composant NavLink.vue :

<script setup>
import { RouterLink } from 'vue-router';

defineProps({
  url: {
    type: String,
    required: false,
    default: '',
  },
  text: {
    type: String,
    required: true,
  },
  isDisabled: {
    type: Boolean,
    required: false,
    default: false,
  },
});
</script>

<template>
  <li class="list-none">
    <RouterLink
      class="block px-4 py-2 text-base"
      :class="{
        'text-gray-500 pointer-events-none opacity-50': isDisabled,
        'text-blue-500 hover:text-blue-600': !isDisabled
      }"
      activeClass="font-semibold text-blue-600"
      aria-current="page"
      :to="url"
      :aria-disabled="isDisabled"
    >
      {{ text }}
    </RouterLink>
  </li>
</template>

Dans ces modifications, nous avons utilisé les balises RouterLink à la place des balises <a>. Les RouterLink sont fournis par Vue Router et sont spécialement conçus pour fonctionner avec les routes de l'application.

Nous avons également supprimé la prop isActive dans le composant NavLink, car Vue Router ajoute automatiquement la classe spécifiée par la prop activeClass au RouterLink correspondant à la page que l'utilisateur visite actuellement. On passe donc les classes font-semibold text-blue-600.

Avec ces modifications, les liens de navigation dans le composant Nav utiliseront les RouterLink pour naviguer vers la page d'accueil et la page "À propos" de l'application.

index.html

Voici le code modifié du fichier index.html:

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mon site</title>
    <meta
      name="description"
      content="Nous sommes une équipe dévouée de professionnels passionnés par la création
    de contenu informatif et utile en ligne."
    />
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

Dans ce code, nous avons ajouté la balise <meta> avec l'attribut name="description" pour définir la description de votre site. Vous pouvez la remplacer par la description souhaitée pour votre application.

Nous avons modifié la balise <html> pour définir la langue de la page sur "fr" pour le français.

main.js

Maintenant, nous allons modifier le fichier main.js pour ajouter Vue Router à notre application, déclarer nos routes et enregistrer le routeur.

Voici le code modifié du fichier main.js :

import { createRouter, createWebHistory } from 'vue-router';
import { createApp } from 'vue';

// Importation de Tailwind CSS
import './assets/main.css'; // Assurez-vous que le fichier Tailwind est correctement configuré

import App from './App.vue';
import Home from './pages/Home.vue';
import About from './pages/About.vue';

// Définition des routes
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
];

// Création du routeur
const router = createRouter({
  history: createWebHistory(),
  routes,
});

// Création de l'application Vue
const app = createApp(App);

// Utilisation du routeur dans l'application
app.use(router);

// Montage de l'application sur l'élément #app de index.html
app.mount('#app');

Dans ce code, nous avons importé les modules nécessaires de Vue Router et de Vue.js. Nous avons également importé les styles de Tailwind de notre fichier style.css pour appliquer les styles personnalisés à notre application.

Ensuite, nous avons défini les routes de notre application en utilisant un tableau d'objets. Chaque objet dans le tableau représente une route avec une propriété path spécifiant l'URL de la route et une propriété component spécifiant le composant Vue associé à la route.

Ensuite, nous avons créé une instance du routeur en utilisant createRouter de Vue Router. Nous avons passé l'option history avec createWebHistory() pour utiliser le mode de l'historique HTML5 pour la gestion des URL.

Ensuite, nous avons créé l'application Vue en utilisant createApp de Vue.js. Nous avons utilisé app.use(router) pour enregistrer le routeur dans l'application et permettre à Vue Router de gérer la navigation.

Enfin, nous avons monté l'application Vue sur l'élément #app de index.html en utilisant app.mount('#app').

Avec ces modifications, nous avons configuré Vue Router dans notre application Vue et défini les routes pour la navigation entre les différentes vues.

Vérification du fonctionnement

Si vous avez suivi toutes les étapes précédentes correctement, votre site devrait maintenant fonctionner avec Vue Router. Les liens de navigation devraient rediriger vers les deux pages différentes que nous avons créées : la page d'accueil et la page "À Propos".

Pour vérifier le fonctionnement, vous pouvez cliquer sur les liens de navigation dans votre application. Par exemple, en cliquant sur le lien "Accueil", vous devriez être redirigé vers la page d'accueil où vous verrez le contenu correspondant. De même, en cliquant sur le lien "À Propos", vous devriez être redirigé vers la page "À Propos" avec le contenu correspondant.

Page d’accueil :

Page à propos :

Si vous rencontrez des problèmes et que votre site ne fonctionne pas comme prévu, je vous recommande de revoir attentivement les étapes précédentes pour vous assurer que vous avez suivi toutes les modifications nécessaires. Vérifiez également que vous avez correctement importé les composants, défini les routes et enregistré le routeur dans votre application.

Félicitations ! Vous avez réussi à adapter votre projet pour utiliser Vue Router et à créer une navigation fluide entre les différentes vues de votre application. Vous pouvez maintenant continuer à développer et améliorer votre site en utilisant les fonctionnalités puissantes de Vue Router.