Cours 17 - Routes avec Vue Router

Table des matières

Objectifs

Déroulement

Qu’est-ce que Vue Router ?

Vue Router est la solution officielle de routage côté client pour Vue. Dans une application monopage (SPA), il permet d’associer l’URL affichée dans le navigateur au composant à rendre, sans recharger complètement la page.

Avec Vue Router, vous pouvez :

Par exemple, une route comme /home peut être associée à un composant affichant la page d’accueil. Lorsque l’utilisateur accède à cette URL, Vue Router affiche automatiquement le composant correspondant.

Vue Router prend aussi en charge des fonctionnalités plus avancées, comme :

1. Paramètres dynamiques (équivalent de $_GET)
2. Routes imbriquées (/home/test)
3. Redirections (comme header('Location: url') en PHP)
4. Navigation programmée
5. Différents modes d’historique (back / next navigateur)

Exemple complet dans un router.ts ici: routes.zip

Concept de vue (view)

Une vue (à ne pas confondre avec Vue.js) est un composant destiné à être affiché par le routeur pour une route donnée. En pratique, une vue est souvent composée d’autres composants plus petits et réutilisables.

Convention suggérée : nommer les vues avec le suffixe View, par exemple HomeView.vue ou ProductDetailsView.vue.
Cela aide à distinguer les vues des composants réutilisables, mais ce n’est pas une obligation imposée par Vue Router.

Installation de Vue Router

Pour installer Vue Router, consultez la documentation officielle :
https://router.vuejs.org/installation

Il existe deux approches principales.

Créer un nouveau projet

La méthode recommandée aujourd’hui pour créer un projet Vue 3 est d’utiliser create-vue.

Commande

npm create vue@latest

Exemple de réponses aux questions

74L4pXCQBE

Ensuite, exécutez les commandes affichées à l’écran pour démarrer le projet.

Ajouter Vue Router à un projet existant

Pour ajouter Vue Router à un projet Vue existant :

Commande

npm install vue-router@latest

Note : @latest indique qu’on installe la dernière version majeure de Vue Router compatible avec Vue 3.

Dans main.ts, le branchement minimal ressemble à ceci :

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')

Dans App.vue, on utilise souvent RouterLink et RouterView ensemble.

Autrement dit :

Lorsqu’un utilisateur clique sur un RouterLink, Vue Router met à jour l’URL sans recharger complètement la page. Ensuite, le routeur cherche quelle route correspond à cette URL et affiche dans RouterView le composant associé.

RouterLink est un composant fourni par Vue Router pour créer des liens de navigation internes à l’application.

Exemple :

<RouterLink to="/about">À propos</RouterLink>

Dans cet exemple :

On peut voir RouterLink comme un lien spécialisé pour les applications Vue avec routage.

Rôle de RouterView

RouterView est le composant qui sert de zone d’affichage pour la vue courante.

Exemple :

<RouterView />

Ce composant agit comme un espace réservé.
Vue Router y affiche automatiquement le composant associé à la route active.

Par exemple :

Fonctionnement ensemble

Dans une application Vue, App.vue contient souvent :

Cela permet de garder la même structure générale dans l’application, pendant que le contenu principal change selon la route.

Le fonctionnement est donc le suivant :

  1. l’utilisateur clique sur un RouterLink
  2. l’URL change
  3. Vue Router trouve la route correspondante
  4. RouterView affiche la vue associée

Exemple complet

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
</script>

<template>
    // Pourrais être ici Header.vue ou Navbar.vue
    <nav>
        <RouterLink to="/">Accueil</RouterLink>
        <RouterLink to="/about">À propos</RouterLink>
    </nav>

    <RouterView />
</template>

Dans cet exemple :

Atelier 17 – Exemple de routes

À partir des fichiers de l’atelier 17 :
atel17.zip

et de la vidéo de démonstration suivante :

À propos du serveur backend utilisé dans l’exemple

Travail à faire

Lisez le code du projet exemple-vue-router afin de comprendre comment les routes sont configurées et utilisées.

Pendant votre lecture :

Recherche de fichiers dans VSCode

Pour rechercher rapidement un fichier dans VSCode, utilisez Ctrl+P, puis tapez son nom.

Pour rechercher un fichier situé dans un dossier précis, tapez le nom du dossier suivi d’un slash /, puis le nom du fichier.

Exemples :

Fichiers à consulter

Remise

Aucune remise n’est demandée pour cet atelier.