Skip to content
Learni
View all tutorials
Frontend

Comment configurer Vue Router dans Vue 3 en 2026

14 minINTERMEDIATE
TypeScriptVue.jsVue Router

Introduction

Vue Router est la bibliothèque officielle de routage pour Vue.js. En 2026, avec Vue 3 et la Composition API, il permet de construire des applications monopages performantes et maintenables. Ce tutoriel intermédiaire vous guide pas à pas pour configurer un routeur complet avec TypeScript, y compris les gardes de navigation, les routes dynamiques et le chargement paresseux des composants. Vous apprendrez à structurer un projet professionnel tout en évitant les pièges courants.

Prérequis

  • Node.js 20+
  • Connaissances intermédiaires de Vue 3 et TypeScript
  • Vite ou Vue CLI installé
  • Compréhension basique des composants .vue

Installation de Vue Router

terminal
npm install vue-router@4

Cette commande installe Vue Router version 4 compatible avec Vue 3. Assurez-vous d'utiliser la version 4 pour bénéficier des dernières fonctionnalités de TypeScript et de la Composition API.

Création du fichier router

src/router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
];

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

export default router;

Ce fichier définit les routes de base avec lazy-loading. createWebHistory() active le mode HTML5 History pour des URLs propres.

Intégration dans main.ts

src/main.ts
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

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

L'utilisation de app.use(router) enregistre le routeur globalement. Cela rend $router et $route accessibles dans tous les composants.

Ajout de routes dynamiques

src/router/index.ts
{
  path: '/user/:id',
  name: 'User',
  component: () => import('../views/User.vue'),
  props: true
}

Les routes dynamiques capturent les paramètres d'URL. L'option props: true transmet automatiquement les paramètres comme props au composant.

Implémentation d'un garde global

src/router/index.ts
router.beforeEach((to, from, next) => {
  const isAuthenticated = true;
  if (to.meta.requiresAuth && !isAuthenticated) {
    next({ name: 'Home' });
  } else {
    next();
  }
});

Les gardes beforeEach permettent de contrôler l'accès aux routes. Utilisez meta.requiresAuth pour protéger des pages privées.

Bonnes pratiques

  • Utilisez toujours le lazy-loading pour les routes
  • Centralisez la configuration dans un seul fichier router/index.ts
  • Définissez des meta tags pour les titres de page
  • Testez les gardes de navigation avec des scénarios réels
  • Préférez createWebHistory pour le SEO

Erreurs courantes à éviter

  • Oublier d'appeler next() dans les gardes
  • Utiliser des imports statiques au lieu du lazy-loading
  • Ne pas typer les routes avec RouteRecordRaw
  • Ignorer les erreurs de navigation avec router.onError

Pour aller plus loin

Approfondissez vos compétences avec nos formations complètes sur Vue.js et TypeScript. Découvrez nos formations Learni.