Vue Academy · Leçon

Configurer Vue Router

Installez Vue Router et définissez vos premières routes

Configurer Vue Router est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 3. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 3 leçons au total.

Qu’est-ce que Vue Router ?

Vue Router est la bibliothèque de routage officielle de Vue.

Associe les URL aux composants
Permet une navigation dans une application à page unique sans recharger entièrement la page
Gère l’historique, les liens et les paramètres

Installer Vue Router

Ajoutez Vue Router à votre projet avec npm.

# Install Vue Router 4 (for Vue 3)
npm install vue-router

# Or have it added during npm create vue@latest

Créer des composants de route

Chaque route affiche un composant. Commencez par des composants de page simples.

<!-- Home.vue -->
<template>
  <h1>Home Page</h1>
</template>

<!-- About.vue -->
<template>
  <h1>About Page</h1>
</template>

Définir le tableau routes

Un tableau routes associe les chemins aux composants.

import Home from "./views/Home.vue"
import About from "./views/About.vue"

const routes = [
  { path: "/", component: Home },
  { path: "/about", component: About }
]

createRouter

La fonction createRouter construit un routeur à partir des routes et d’un mode d’historique.

import { createRouter, createWebHistory } from "vue-router"

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

export default router

createWebHistory

createWebHistory utilise l’API d’historique HTML5 pour obtenir des URL claires comme /about.

Aucun hachage dans l’URL
Nécessite une configuration du serveur pour que les liens profonds fonctionnent
L’alternative est createWebHashHistory (/#/about)

Enregistrer le routeur

Installez le routeur dans l’app avec app.use.

import { createApp } from "vue"
import App from "./App.vue"
import router from "./router"

createApp(App)
  .use(router)
  .mount("#app")

Affichage du routeur

Le composant d’affichage du routeur est l’emplacement où le composant de la route correspondante est affiché.

<!-- App.vue -->
<template>
  <nav>...</nav>
  <router-view></router-view>
</template>

<!-- The current page renders here -->

Lien du routeur

Utilisez un lien du routeur plutôt que des balises d’ancrage classiques pour la navigation. Cela évite de recharger entièrement la page.

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

Style des liens actifs

Les liens du routeur ajoutent automatiquement des classes CSS au lien actif.

lien-du-routeur-actif pour les correspondances partielles
lien-du-routeur-exactement-actif pour les correspondances exactes

Appliquez un style à ces classes pour mettre en évidence la page actuelle.

Assembler le tout

Le processus complet :

Définir les routes en associant les chemins aux composants
Créer le routeur avec createRouter et createWebHistory
L’enregistrer avec app.use(router)
Placer l’affichage du routeur et naviguer avec les liens du routeur

Vérification rapide

Vérifiez votre compréhension de la configuration de Vue Router.

Récapitulatif : configurer Vue Router

Vous avez configuré le routage côté client :

Installer avec npm install vue-router
Définir un tableau routes
Créer le routeur avec createRouter et createWebHistory
L’enregistrer avec app.use(router)
Utiliser l’affichage et les liens du routeur

Ensuite : les routes imbriquées et dynamiques.

Questions Fréquemment Posées

La leçon « Configurer Vue Router » est-elle gratuite ?

Oui — le texte complet de « Configurer Vue Router » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 3 leçons au total.

Qu'est-ce que j'apprendrai dans « Configurer Vue Router » ?

Installez Vue Router et définissez vos premières routes Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Vue Academy ?

Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 3.

Combien de temps prend la leçon « Configurer Vue Router » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?

Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Vue Academy