DEV {JS}

Mode sombre

Étape 13 – Rendre la carte Pokémon cliquable ​

🎯 Objectifs de l’étape ​

Dans cette étape, vous allez rendre chaque carte Pokémon cliquable pour accéder à une page de détail.
Vous apprendrez à :

  • utiliser la navigation dynamique avec Vue Router,
  • créer une route avec paramètre (/pokemons/:id),
  • naviguer vers une page en cliquant sur une carte.

📝 Étapes à suivre ​

1. Créer une route dynamique ​

L'objectif de cette étape est de créer une page dynamique pour afficher la fiche détaillée d’un Pokémon, en récupérant son identifiant depuis l’URL.

Par exemple, si l’URL est /pokemons/29c7-43cc, on doit afficher la fiche du Pokémon avec l’identifiant 29c7-43cc.

Voici la marche à suivre pour créer cette route dynamique :

  1. Dans le dossier src/pages/, créez un dossier nommé pokemons/ ce dossier contiendra toutes les pages liées aux Pokémons, par emple le formulaire d’ajout.
  2. Ensuite, créez un dossier nommé [id] dans le dossier pokemons/ et créez un fichier index.vue à l’intérieur.

Vous devrez avoir la structure de fichiers suivante :

src/
└── pages/
    └── pokemons/
        └── [id]/
            └── index.vue

Le nom du dossier entre crochets ([id]) indique à Vue Router que c’est une route dynamique et que le nom du dossier sera remplacé par la valeur du paramètre id dans l’URL.

Le nom du fichier index.vue est important, car il indique à Vue Router que cette page est la page par défaut pour cette route dynamique.

2. Fiche de détail d’un Pokémon ​

Ce fichier affichera la fiche détaillée d’un Pokémon selon son identifiant.

Pour commencer, nous allons simplement afficher le titre de la page avec l’identifiant du Pokémon, pour vérifier que la route fonctionne et que l’identifiant est bien récupéré.

vue
<!-- src/pages/[id]/index.vue -->
<template>
  <h1>Détail du Pokémon {{ route.params.id }}</h1>
</template>

<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
</script>

Testez la route ​

Pour tester la route, ouvrez votre navigateur et accédez à l’URL suivante :

http://localhost:3000/pokemons/107

Vous devriez voir le titre "Détail du Pokémon 107".

Changer l’identifiant dans l’URL (actuellement 107) pour vérifier que la route fonctionne correctement. Par exemple, essayez avec 25, toto, etc.

3. Modifier PokemonCard.vue pour ajouter un lien autour de la carte ​

Pour rendre la carte Pokémon cliquable, vous devez ajouter un lien autour de la carte. Ajoutez un composant <router-link> autour de la carte dans le fichier src/components/PokemonCard.vue comme ceci :

vue
<router-link :to="`/pokemons/${pokemon.id}`" class="text-decoration-none">
   <v-card class="pt-4">
      <v-img :src="`/images/${pokemon.img}`" height="200" contain />
      <v-card-title>{{ pokemon.name }}</v-card-title>
      ...
   </v-card>
</router-link>

Maintenant, lorsque vous cliquez sur la carte, vous serez redirigé vers la page de détail du Pokémon correspondant.

Autre technique utiliser la propriété to directement sur <v-card> ​

Autre solution à priviligier ajouter le to à la <v-card> à la place du <router-link>

vue
<v-card class="pt-4" :to="`/pokemons/${pokemon.id}`">
   <v-img :src="`/images/${pokemon.img}`" height="200" contain />
   <v-card-title>{{ pokemon.name }}</v-card-title>
   ...
</v-card>

Vous pouvez tester cette nouvelle solution qui devrait parfaitement fonctionner.

Problème du clic sur l'îcone des favoris ​

Si vous cliquez sur l'icône des favoris, vous constatez que cela ouvre aussi la page de détail du Pokémon.

En effet, le composant <router-link> englobe la carte entière, y compris l'icône des favoris. Cela signifie que le clic sur l'icône des favoris déclenche également la navigation vers la page de détail.

Pour éviter cela, vous devez empêcher l'action par défaut du clic sur l'icône des favoris en ajoutant @click.prevent. .prevent empêche le comportement par défaut, le clic de la carte.

vue
<v-btn icon @click.prevent="pokemonStore.toggleFavorite(pokemon)">
  <v-icon :color="pokemonStore.isFavorite(pokemon) ? 'red' : ''">
    {{ pokemonStore.isFavorite(pokemon) ? 'mdi-heart' : 'mdi-heart-outline' }}
  </v-icon>
</v-btn>

✅ Résultat attendu ​

  • Chaque carte est entièrement cliquable
  • Le clic ouvre la page /pokemons/ID
  • Le bon identifiant est affiché dynamiquement

🧪 Tests à effectuer ​

  1. Cliquez sur plusieurs cartes depuis la page d’accueil
  2. Vérifiez que l’URL change bien en /pokemons/12, /pokemons/25, etc.
  3. Vérifiez que le bon id est affiché dans le titre de la page [id].vue
  4. Vérifiez que le clic sur l’icône des favoris n’ouvre pas la page de détail du Pokémon

📘 Documentation utile ​

💡 Astuce bonus ​

Ajoutez un effet visuel au survol de la carte pour inciter au clic :

vue
<v-card class="pa-2 transition-swing" elevation="2" hover>