Qu'est-ce que vue-router ?

vue-router est un système de routage pour Vue.js qui permet de naviguer entre différentes vues en modifiant l'URL sans effectuer de rechargement complet de la page, assurant ainsi une expérience utilisateur fluide.

Les trois modes de vue-router

Vue-router offre trois modes de fonctionnement pour gérer le routage côté client :

• Mode hash (par défaut) : repose sur le fragment d'URL après le symbole #.
• Mode history : exploite l'API History du navigateur pour une URL propre.
• Mode abstract (appelé mode mémoire dans vue-router v4) : stocke l'état de routage en mémoire sans affecter l'URL.

Avec vue-router v4, la spécification du mode se fait via des fonctions dédiées :

• createWebHashHistory() pour le mode hash.
• createWebHistory() pour le mode history.
• createMemoryHistory() pour le mode mémoire.

Configuration dans Vue 2

const routeur = new VueRouter({
  mode: 'history', // Remplacez par 'hash' pour le mode par défaut
  routes: tableauItineraires
});

Configuration dans Vue 3

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

const routeur = createRouter({
  historique: createWebHistory(), // Utilisez createWebHashHistory() pour le mode hash
  itineraires: []
});

Fonctionnement du mode hash

Le mode hash s'appuei sur la propriété location.hash pour identifier la route actuelle via le segment après le #.

Les modifications de hash peuvent être déclenchées par des liens ou via JavaScript, et elles ajoutent une entrée dans l'historique du navigateur.

Un changement de hash ne recharge pas la page mais émet un événement hashchange, permettant de réagir aux navigations.

Exemple de surveillance :

window.addEventListener('hashchange', () => {
  const routeCourante = location.hash.substring(1);
  // Logique pour charger le composant correspondant
});

Fonctionnement du mode history

Le mode history utilise les méthodes history.pushState() et history.replaceState() pour manipuler l'historique sans rechargement.

Ces APIs acceptent un objet d'état, un titre (souvent ignoré) et une URL à ajouter à l'historique.

Pour détecter les navigations via les boutons avant/arrière, on écoute l'événement popstate.

function gererPopstate(evenement) {
  const cheminActuel = window.location.pathname;
  const etatCourant = evenement.state;
  // Mettre à jour la vue en fonction de la route
}
window.addEventListener('popstate', gererPopstate);

Remarque : pushState() et replaceState() ne déclenchent pas popstate, donc une mise à jour manuelle peut être nécessaire après ces appels.

Mode mémoire (abstract)

Le mode mémoire maintient l'état de routage uniquement en mémoire, sans modifier l'URL du navigateur.

Il est adapté aux environnements comme Node.js ou le rendu côté serveur (SSR), et est instancié via createMemoryHistory().

Bien qu'utilisable dans le navigateur, ce mode ne supporte pas la navigation historique (pas de boutons avant/arrière fonctionnels).

Différences entre les modes hash et history

Mode hash : URL sous la forme http://exemple.com/#/utilisateur/10

Mode history : URL sous la forme http://exemple.com/utilisateur/10

Le mode history nécessite une configuration serveur pour gérer les routes correctement, contrairement au mode hash qui fonctionne sans support supplémentaire.

Configuraton avancée des routes

Chargement paresseux (lazy loading)

Utilisez des imports dynamiques pour différer le chargement des composants :

import Vue from 'vue';
import Router from 'vue-router';

const routeur = new Router({
  itineraires: [
    {
      chemin: '/',
      composant: () => import(/* webpackChunkName: 'navigateur' */ './../composants/Navigateur')
    }
  ]
});

Routes dynamiques

Les paramètres dynamiques sont définis avec deux-points dans le chemin pour capturer des segments variables :

const routeur = new VueRouter({
  mode: 'histoire',
  itineraires: [
    {
      chemin: '/utilisateur/:id',
      composant: Utilisateur
    }
  ]
});

// Accès aux paramètres dans un composant via this.$route.params.id

Dans un template : {{ $route.params.id }}