Étape 3 — Créer les pages et la navigation

Résultat attendu — Page À propos

Objectifs

• Créer plusieurs pages avec le routing automatique (file-based routing)
• Compléter le menu de navigation avec v-btn :to
• Comprendre la différence entre useRoute() et useRouter()

Tâches

1. Créer les pages

Dans src/pages/, créez les fichiers suivants :

Fichier	Route	Contenu initial
favoris.vue	/favoris	Titre "Mes favoris"
a-propos.vue	/a-propos	Titre "À propos"

Chaque fichier contient un <template> minimal :

<template>
  <v-container>
    <h1 class="text-h3 text-center my-6">Mes favoris</h1>
    <!-- Contenu à venir -->
  </v-container>
</template>

Encart oral — File-based routing

Avec unplugin-vue-router, chaque fichier .vue dans src/pages/ crée automatiquement une route. Pas besoin de configurer le routeur manuellement.

Règle simple : le nom du fichier = le chemin de l'URL.

2. Compléter le menu de navigation

Le menu se trouve dans src/components/AppHeader.vue. Il utilise ces composants Vuetify :

Composant	Rôle	Documentation
<v-app-bar>	Barre de navigation en haut de l'écran	App Bars
<v-avatar>	Logo Poké Ball cliquable	Avatars
<v-toolbar-title>	Titre "Pokédex"	Toolbars
<v-btn>	Bouton de navigation (:to = lien, :icon = icône)	Buttons

Ajoutez les liens vers les nouvelles pages dans le tableau menuItems :

const menuItems = [
  { title: 'Accueil', path: '/', icon: 'mdi-pokeball' },
  { title: 'Favoris', path: '/favoris', icon: 'mdi-heart' },
  { title: 'À propos', path: '/a-propos', icon: 'mdi-information' },
]

Choisissez vos icônes sur pictogrammers.com/library/mdi.

3. Tester la navigation

• Cliquez sur chaque lien → la bonne page s'affiche
• Testez une URL qui n'existe pas (ex: /xyz) → la page 404 s'affiche
• Observez que la page ne se recharge pas (c'est une SPA)

Projet perso — À faire en parallèle

Dans votre projet individuel :

1. Créez vos pages (liste, détail, favoris, à propos)
2. Complétez votre menu de navigation avec des liens vers chaque page
3. Vérifiez que la navigation fonctionne sans rechargement

Tests

• Les routes /favoris et /a-propos affichent les bonnes pages
• Le menu contient les liens vers toutes les pages
• La page 404 s'affiche pour les URLs inconnues
• La navigation ne recharge pas la page (SPA)

Solutions

src/pages/favoris.vue

<template>
  <v-container>
    <h1 class="text-h3 text-center my-6">Mes favoris</h1>
    <v-alert type="info" variant="tonal">
      Vous n'avez pas encore de Pokémon favoris.
    </v-alert>
  </v-container>
</template>

src/pages/a-propos.vue

<template>
  <v-container>
    <h1 class="text-h3 text-center my-6">À propos</h1>

    <v-card max-width="800" class="mx-auto">
      <v-card-text>
        <p class="text-body-1 mb-4">
          Le <strong>Pokédex</strong> est une encyclopédie électronique portable conçue pour
          cataloguer et fournir des informations sur les différentes espèces de Pokémon.
        </p>
        <p class="text-body-1 mb-4">
          Cette application web a été développée dans le cadre du cours <strong>C141</strong>
          à l'ESIG, en utilisant <strong>Vue.js 3</strong>, <strong>Vuetify 3</strong>,
          <strong>Pinia</strong> et <strong>Axios</strong>.
        </p>
      </v-card-text>
    </v-card>
  </v-container>
</template>

src/components/AppHeader.vue

<template>
  <v-app-bar flat>
    <v-container class="d-flex align-center">
      <v-avatar
        class="mr-4 pa-0 cursor-pointer"
        image="@/assets/pokeball.svg"
        size="64"
        @click="$router.push('/')"
      />

      <v-toolbar-title>Pokédex</v-toolbar-title>

      <v-btn
        v-for="link in menuItems"
        :key="link.title"
        :icon="link.icon"
        :to="link.path"
      />
    </v-container>
  </v-app-bar>
</template>

<script setup>
const menuItems = [
  { title: 'Accueil', path: '/', icon: 'mdi-pokeball' },
  { title: 'Favoris', path: '/favoris', icon: 'mdi-heart' },
  { title: 'À propos', path: '/a-propos', icon: 'mdi-information' },
]
</script>

Commit

git add -A
git commit -m "feat: pages favoris et à propos + navigation"