Par Jonathan Massa

Expert Technologie

Lectures: 2

Ingénierie logicielle

Partager l’article

Dans un paysage où les interfaces web exigent rapidité et fluidité, la mise en place d’un système de navigation robuste est un levier clé pour la satisfaction utilisateur et la maintenabilité. Cet article propose un panorama complet du routage dans Vue.js, depuis une implémentation maison légère jusqu’à la maîtrise de la bibliothèque officielle vue-router.

Vous y découvrirez les mécanismes, avantages et limites de chaque approche, ainsi que des bonnes pratiques pour garantir performance, scalabilité et intégration CI/CD. À travers des exemples concrets issus de projets en Suisse, nous mettons en lumière les enjeux business et techniques pour des équipes IT exigeantes.

Comprendre le routage natif dans Vue.js et ses enjeux

Une navigation client-side adéquate réduit les allers-retours serveur et améliore l’expérience perçue par l’utilisateur. Cette section détaille l’écosystème Vue.js et montre comment implémenter un router minimal sans dépendance externe.

L’écosystème Vue.js et les enjeux business

Vue.js s’appuie sur des composants Single-File (SFC) permettant de regrouper template, script et style. Les deux paradigmes majeurs – Options API et Composition API – offrent des modèles clairs pour organiser la logique et l’état.

Dans une SPA, l’utilisateur navigue sans rechargement complet, ce qui préserve l’état de l’application et accélère les interactions. Cette fluidité est essentielle pour assurer un taux de conversion optimal et limiter l’attrition.

Côté business, une navigation client-side permet de réduire la charge serveur et les coûts d’infrastructure, tout en facilitant le déploiement rapide de nouvelles fonctionnalités. La modularité offerte par Vue.js accélère le time-to-market et améliore la maintenabilité.

Implémentation d’un router minimal avec hashchange

Un router natif peut s’appuyer sur la propriété window.location.hash et l’événement hashchange. On définit une table de correspondance simple entre chemin et composant.

Exemple de code pour un projet initialisé avec Vite :

const routes = {
  '#/': Home,
  '#/about': About
};
const currentView = Vue.ref(routes[window.location.hash] || routes['#/']);
window.addEventListener('hashchange', () => {
  currentView.value = routes[window.location.hash] || routes['#/'];
});

Dans votre App.vue, on peut faire :

<div>
  <nav>
    <a href="#/">Home</a>
    <a href="#/about">About</a>
  </nav>
  <component :is="currentView"></component>
</div>

Les composants Home.vue et About.vue contiennent leur template et script habituels. Cette approche ne nécessite aucune configuration serveur et convient pour des prototypes ou des petits sites.

Atouts et limites du routage natif

Le principal avantage d’un router maison est l’absence de dépendance externe et la simplicité de mise en œuvre. Aucun build spécial ou script de redirection n’est requis en production.

Cette méthode est adaptée aux applications avec moins de cinq routes et sans besoins de paramètres dynamiques ou de navigation programmée. Elle permet un prototypage rapide et une compréhension directe des mécanismes.

En revanche, dès que le projet croît, la gestion des routes dynamiques (/users/:id), des sous-routes ou des guards devient rapidement ingérable. Aucune API de redirection conditionnelle ni hooks n’existent nativement, et le code tend à s’éparpiller.

Un exemple d’un portail interne développé pour une PME a montré que l’ajout de plusieurs pages a entraîné un code éparpillé et un risque d’incohérence grandissant.

Passer à vue-router : configuration de base et navigation

vue-router est la bibliothèque officielle pour des SPA Vue.js de taille moyenne à grande. Cette section présente son installation, la configuration initiale et les modes de navigation déclarative et programmée.

Installation et configuration du routeur

Pour démarrer, on installe vue-router via npm :

npm install vue-router@4

Ensuite, dans main.js :

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

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
});

createApp(App).use(router).mount('#app');

Cette configuration initialise un routeur en mode History et déclare deux routes principales. L’application Vue est ensuite liée au routeur avant le montage.

Navigation déclarative avec router-link et router-view

Le balisage HTML est remplacé par les composants <router-link> et <router-view>. Le premier génère des liens adaptés à la configuration History ou Hash, et le second affiche dynamiquement le composant associé à la route active.

Exemple :

<template>
  <nav>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </nav>
  <router-view></router-view>
</template>

Cette approche garantit une syntaxe déclarative et cohérente, avec gestion automatique des classes actives et du comportement par défaut des liens.

Navigation programmée avec le routeur

Pour déclencher une navigation depuis le code, on utilise les méthodes du routeur. Avec Options API : this.$router.push('/path') ou this.$router.replace('/path'). Avec Composition API :

import { useRouter } from 'vue-router';
setup() {
  const router = useRouter();
  function goToHome() {
    router.push({ name: 'home' });
  }
  return { goToHome };
}

Ces méthodes permettent de gérer des redirections conditionnelles, de simuler le back button (router.go(-1)) ou de remplacer l’historique sans ajouter d’entrée.

Une organisation a migré son portail vers vue-router et a pu centraliser ses redirections de connexion dans un middleware global, simplifiant la maintenance et réduisant les bugs.

Edana : partenaire digital stratégique en Suisse

Nous accompagnons les entreprises et les organisations dans leur transformation digitale

Parlons de vous

Routes avancées, modes d’historique et navigation sécurisée

Pour des applications complexes, vue-router offre des routes nommées, dynamiques, imbriquées, plusieurs modes d’historique et des guards pour contrôler l’accès. Cette section explore ces fonctionnalités avancées.

Routes nommées, dynamiques et imbriquées

Déclarer une route avec un attribut name facilite les renvois ultérieurs et la refactorisation. Les chemins dynamiques s’écrivent sous la forme /users/:id et capturent les paramètres dans $route.params.

Les sous-routes (children) permettent de structurer les pages composées, par exemple un parent /dashboard et ses onglets enfants.

Exemple :

routes: [
  {
    path: '/user/:id',
    name: 'user-profile',
    component: UserProfile,
    children: [
      { path: 'settings', component: UserSettings },
      { path: 'activity', component: UserActivity }
    ]
  }
]

Une enseigne a utilisé cette configuration pour charger dynamiquement le profil utilisateur et ses sous-modules. L’approche a démontré une nette réduction du code redondant et une meilleure tolérance au renommage des routes.

Modes History vs Hash et configuration serveur

vue-router propose createWebHashHistory() (URLs avec #) et createWebHistory() (HTML5 History API). Le mode Hash ne nécessite aucune configuration serveur, tandis que History offre des URLs propres pour le SEO mais requiert une redirection de toutes les requêtes vers index.html.

Pour un déploiement Nginx :

location / {
  try_files $uri $uri/ /index.html;
}

En mode History, il est crucial d’anticiper ces réécritures, sous peine d’erreurs 404 sur rechargement direct de pages profondes.

Navigation guards et sécurité d’accès

Les guards globaux (router.beforeEach), par-route (beforeEnter) et au niveau composant (beforeRouteEnter, beforeRouteLeave) autorisent un contrôle fin des accès.

Cas d’usage : vérifier un token avant chaque navigation et rediriger vers la page de login en cas d’absence d’authentification. Les guards supportent les retours de promesses, permettant d’attendre la résolution d’une API d’identité.

Exemple :

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next({ name: 'login' });
  } else {
    next();
  }
});

Cette approche permet de centraliser la sécurité et d’éviter la dispersion de vérifications dans chaque composant.

Optimisation, SSR/Nuxt et tests pour un routing de qualité

Améliorer la performance par le code splitting, tirer parti de SSR avec Nuxt.js pour le SEO et intégrer des tests automatisés garantissent un routing fiable et maintenable dans la durée.

Lazy loading et découpage du bundle

Le routage dynamique autorise le chargement différé des composants via la syntaxe () => import('...'). Cela génère des chunks séparés et réduit le poids initial du bundle.

Dans la configuration :

routes: [
  { path: '/about', component: () => import('@/views/About.vue') }
]

mobile et les réseaux instables bénéficient particulièrement de cette technique, accélérant le time-to-interactive.

Intégration SSR/Nuxt et SEO

Nuxt.js automatise la création de routes via le dossier pages/ et propose un mode SSR ou SSG pour une indexation optimisée. Chaque fichier .vue devient une route, et le nuxt.config permet de définir metadata et head.

Grâce à SSR, le contenu est rendu côté serveur, ce qui améliore le SEO et les performances perçues. Les balises meta sont gérées nativement pour chaque page.

Tests et bonnes pratiques pour un router fiable

Les tests unitaires avec Jest peuvent simuler la navigation en instanciant le routeur et en vérifiant la résolution des routes. Les tests e2e (Cypress, Playwright) automatisent des parcours utilisateur complets pour valider la cohérence du routing.

Il est important d’intégrer ces tests dans la CI/CD pour détecter rapidement toute régression. Les conventions de nommage DRY et la séparation des fichiers router par domaine fonctionnel renforcent la maintenabilité.

Un établissement de santé a mis en place des tests e2e pour couvrir la navigation entre dossiers patients, garantissant conformité et absence d’impair lors des mises à jour de version.

Optimisez votre navigation Vue pour booster performance et maintenabilité

La mise en place d’un router adapté, qu’il soit natif pour un prototype léger ou basé sur vue-router pour des applications robustes, constitue un fondement stratégique. Les routes nommées, le choix du mode d’historique, les guards et le lazy loading sont autant de leviers à maîtriser pour garantir une expérience utilisateur fluide et un code maintenable.

Notre approche contextuelle, modulable et orientée ROI vous accompagne depuis l’audit de votre architecture jusqu’à la mise en place de tests automatisés et de processus CI/CD. Nos experts sont à vos côtés pour définir la stratégie de routing la plus adaptée à vos enjeux métier, assurer la montée en charge et sécuriser votre déploiement.

Parler de vos enjeux avec un expert Edana