II. Utilisation du router et gestion des parcours

1. Le router

Une application web est souvent constituée de plusieurs pages, ici notre application est mono-page puisque celle-ci est chargée une fois par le navigateur et la navigation est ensuite gérée en interne par le framework.

C’est à ce niveau qu’intervention le “Router”, il va permettre d’afficher différentes vues (views) au fur et à mesure de la navigation de l’utilisateur dans notre application.

Le router a déjà été mis en place dans votre base de code, cependant tout au long du TD vous aurez à créer de nouvelles vues et donc à travailler avec celui-ci, voici comment il fonctionne.

a. Affichage des routes

Cette partie est normalement déjà mise en place dans votre projet, si vous regardez dans le fichier src/App.vue qui est en réalité la racine de votre projet, vous pouvez y trouver ce code :

<template> 
  <NavBar /> 
  <RouterView /> 
</template>

Nous avons ici deux composants vue un qui fait partie du projet NavBar celui-ci permet d’afficher la barre de navigation en haut de l’application. En dessous vous avez un deuxième composant RouterView, ce composant vient d’une bibliothèque nommée vue-router et permet d’afficher le contenue de nos différentes vues dans la page, sous la barre de navigation.

b. Ajout d’une nouvelle vue

Maintenant que nous avons la possibilité d’afficher différentes vues, il faut modifier le router afin d’ajouter une nouvelle “page” à notre application. Cela se passe dans le fichier src/router/index.ts. Une fois dans ce fichier, vous trouverez ce code :

const router = createRouter({ 
  history: createWebHistory(import.meta.env.BASE_URL), 
  routes: [ 
    { 
      path: '/', 
      name: 'home', 
      component: HomeView 
    }, 
  ] 
})

Nous allons le modifier pour ajouter une vue qui permettra plus tard d’afficher la liste des parcours et qui sera accessible depuis l’url ‘/parcours’, voici les étapes à suivre :

Créer un nouveau fichier src/presentation/views/ParcoursListView.vue avec ce contenu :

<script setup lang="ts"> 
</script> 

<template> 
        Hello world 
</template>

Ajouter le nouveau chemin dans src/router/index.ts

En haut du fichier, ajouter l’import de notre nouvelle vue :

import ParcoursListView from '@/presentation/views/ParcoursListView.vue'

Ensuite ajouter une nouvelle route dans le tableau “routes : []” du router :

{ 
      path: '/parcours', 
      name: 'parcours', 
      component: ParcoursListView 
 }

Le nouveau code devrait ressembler à ça :

const router = createRouter({ 
  history: createWebHistory(import.meta.env.BASE_URL), 
  routes: [ 
    { 
      path: '/', 
      name: 'home', 
      component: HomeView 
    }, 
    { 
      path: '/parcours', 
      name: 'parcours', 
      component: ParcoursListView 
    } 
  ] 
})

c. Ajout d’un lien vers une vue (RouterLink)

Vous devriez maintenant être en mesure d’accéder à la page /parcours de votre application sur l’url suivante http://localhost:5173/parcours et cela devrait ressembler à ceci :

Nous allons maintenant ajouter un chemin dans la barre de navigation du haut permettant d’accéder à cette vue depuis notre application, pour se faire le RouterLink nous sera d’une aide précieuse. Dans le fichier src/presentation/components/navigation/NavBar.vue nous allons le modifier afin d’ajouter un accès à la page d’accueil :

<ul class="nav nav-pills flex-column mb-auto">
        <li class="nav-item">
            <RouterLink class="nav-link" active-class="active" to="/">Accueil</RouterLink>
        </li>
</ul>

Comme vous pouvez le voir nous avons ces lignes :

<li class="nav-item">
	<RouterLink class="nav-link" active-class="active" to="/">Accueil</RouterLink>
</li>

active-class="active"

Permet de définir la class css qui doit être utilisée pour le style du lien lorsque la page est active.