Commentaires
On aura vu pas mal de choses avec vue-router ! Tu es désormais prêt pour faire de magnifiques SPA professionnelles !

Arthur, l'apprenti développeurIl est vrai, je t'en remercie.
Il reste néanmoins deux petits points que je voulais voir avec toi.

Correction du bug isActive sur le lien Home


Oui, il traine depuis le début celui-là... On l'avait oublié. En faisant notre custom link pour le lien home, on avait oublié la classe à mettre s'il était actif !
Corrigeons cela :

{"language":"text/html","content":" <router-link :to=\"{name:'Home'}\" custom v-slot=\"{ navigate, href, isActive }\">\n <a :href=\"href\" @click=\"navigate\" :class=\"isActive ? 'router-link-active router-link-exact-active' : ''\"><span\n class=\"material-icons\">home</span>Home</a>\n </router-link>","filename":"App.vue"}

Et voilà !

Arthur, l'apprenti développeurAh super, ça me perturbait !

Le routeBeforeUpdate


Comme promis, voici le routeBeforeUpdate sur la page NewsShow.vue. Le code est un peu complexe, je l'admets. Si tu as des questions, tu sais où me trouver !

{"language":"text/html","content":"<template>\n <div v-if=\"loading\" class=\"loading\">Loading...</div>\n <div v-if=\"error\" class=\"error\">{{ error }}</div>\n <h2 class=\"text-blue-400 text-xl py-12\">{{ title }}</h2>\n <div class=\"mx-auto flex justify-center\" v-if=\"image && !image.includes('youtube')\">\n <img class=\"h-24 w-30 object-cover\" :src=\"image\" :alt=\"title\">\n </div>\n <p class=\"mt-3 text-base text-gray-500\">\n {{ description }}\n </p>\n <p>Auteur : <span v-if=\"author\">{{ author }}</span><span v-else>Non communiqué</span></p>\n <p>Accéder à l'article : <a :href=\"url\">\"{{ title }}\" sur <u>{{ source }}</u></a></p>\n\n</template>\n<script>\n function fetchData(id, callback = null) {\n fetch(`http://api.mediastack.com/v1/news?access_key=${process.env.VUE_APP_MEDIASTACK_KEY}&countries=fr`)\n .then(data => data.json())\n .then(data => {\n if (callback != null) {\n callback(null, data.data[id])\n }\n\n })\n .catch(error => {\n error = (JSON.parse(error)).message\n if (callback != null) {\n callback(error, null)\n }\n })\n }\n export default {\n data() {\n return {\n error: null,\n loading: null,\n title: null,\n image: null,\n description: null,\n source: null,\n author: null,\n url: null,\n }\n },\n beforeRouteEnter(to, from, next) {\n fetchData(to.params.id, (error, news) => {\n next(vm => vm.setData(error, news))\n })\n },\n beforeRouteUpdate(to) {\n this.error = null\n this.loading = null\n this.title = null\n this.image = null\n this.description = null\n this.url = null\n this.source = null\n this.author = null\n fetchData(to.params.id, (error, news) => {\n this.setData(error, news)\n })\n },\n methods: {\n setData(error, news) {\n this.error = error\n this.title = news.title\n this.url = news.url\n this.image = news.image\n this.description = news.description\n this.author = news.author\n this.source = news.source\n\n }\n }\n }\n</script>","filename":"NewsShow.vue"}


Et après ?


Il reste encore quelques points sur le router que je n'ai préféré pas aborder (rapport complexité / fréquence d'utilisation). Notamment la gestion de l'historique ainsi que le comportement du scrolling. Tu pourras retrouver, comme d'habitude, toutes les infos sur la très bonne documentation de vue : https://next.router.vuejs.org

Ton apprentissage de Vue se concrétise !

Arthur, l'apprenti développeurOui ! Je suis super content de voir tout ce que je sais faire désormais... Merci encore ! Mais, est-ce que j'ai fini le tour de Vue ?
Au risque de te décevoir si tu es d'origine paresseuse, et au risque de te surprendre si tu es d'origine curieuse : non ! Il reste encore pas mal de choses à voir. Notamment l'API de composition arrivée avec Vue 3. Et enfin, les progressive web applications, un sujet très moderne et qui nécessite un bon bagage. Peut-être verrons-nous ça ensemble ;). En tout cas, concernant l'API de composition, sache que sur l'exemple juste au dessus, pour fetchData, il aurait été bon de l'utiliser pour avoir un code plus propre. L'API de composition nous permet en effet de séparer notre code par "objectifs"/"fonctionnalités" en + du découpage par composants.


J'ai terminé cette partie
Demander de l'assistance