Exercice "Navigation parmi les chapitres" via Router¶

Aperçu du résultat¶

Warning

Chaque fichier à modifier à une indication TODO là où vous devez intervenir et écrire du code.

Téléchargez les fichiers de bases et décompressez (dézippez)
Ouvrez dans VS Code et ouvrez le terminal, puis npm install pour installer les dépendances
Démarrez le projet avec npm run dev

Ouvrez package.json et vérifiez si Vue Router est installé dans le projet. Sinon, installez le.
Dans le fichier de configuration des routes src/router/index.js
- Importez les deux viewsdu projet.
- Définir les routes pour le projet. Une d'elle (celle de chapter), utilisera une paramètre dynamique (l'id du chapitre).

Info

À chaque étape, prenez le temps d'analyser le fichier en cours.

Dans le fichier App.vue, il faut afficher la view active du sytème router. (TODO: étape 1)
Ensuite, supprimez l'importation de HomeView dans ce fichier car il ne sera plus utile car ils sera importé via le Router Vue (TODO étape 2).

Info

À chaque étape, prenez le temps d'analyser le fichier en cours.

Dans src/views/HomeView.vue, créez le lien sur [Commencez l'aventure] avec une route vers le premier chapitre. Voici comment:
Dans la méthode startAdventure() créez un lien, de façon programmatique qui crée une navigation vers le chapitre 1 (id: '1').
Appelez cette méthode au clic du bouton .start-button.
Dans src/views/ChapterView.vue, récupérez l'ID du chapitre depuis l'URL et sotckez le dans la donnée this.chapterId.
Testez le tout. Vous devriez être en mesure de cliquer sur le bouton [Commencez l'aventure] et naviguer vers le chapitre 1 à partir de l'accueil.

Info

À chaque étape, prenez le temps d'analyser le fichier en cours.

Dans src/views/ChapterView.vue, dans la méthode makeChoice, naviguer vers le prochain chapitre (nextChapterId) de façon programmatique.
Mettez à jour l'ID local du chapitre this.chapterId.
Testez le tout en naviguant, en prenant des choix, de chapitre en chapitre.