Il 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à !
Ah 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 !
Oui ! 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.
En tout cas, j'ai été ravi de vous accompagner jusqu'ici. Vous devriez tous pouvoir faire déjà de belles choses avec Vue.JS désormais. J'espère vous avoir amené à être curieux, à approfondir et à aimer ce framework. Je n'ai pas de dates de sortie pour les prochains tutoriels, mais je reste disponible si vous avez des questions.
Merci encore à tous !
Antoine
Merci encore à tous !
Antoine
J'ai terminé cette partie