Vue.js pour les débutants ! (PARTIE 3)
C’est parti pour le Routttiiiiiiinnngg !
(si vous n’avez pas suivi la première et deuxième partie, allez y dès maintenant ! )
❤️ 💛 NEW COURSE ||||| 2019 |||||| VUE.JS 3 |||||||
https://medium.com/@thibault60000/vue-js-for-beginner-pour-d%C3%A9butants-part-1-2019-en-fr-2a80b2a50e37
NEW COURSE ||||| 2019 |||||| VUE.JS 3 ||||||| 💙 💜
Et mon nouveau tutoriel de juillet 2019 : React + GraphQL + StyledComponents + Apollo + Prisma Ici
Petite introduction
Comme vous le savez, comme pour React ou Angular, Vue peut être utilisé pour créer une SPA (Single Page Application).
Autrement dit, l’application n’est constituée que d’une seule page, à une unique URL (bien que visuellement on puisse avoir la sensation de changer de page via les menus et onglets par exemple), il n’y a en fait aucune vraie navigation dans l’application, ni de requête pour accéder à une nouvelle page côté serveur.
Bien entendu pour éviter de recharger son application inutilement à chaque clic,on peut simuler plusieurs ressources et leur URL au travers d’un fragment identifier (utilisation du caractère “#”) qui est ajouté dans l’URL
Pour que l’application soit correctement indexer par les moteurs de recherche et faciliter les redirections, il sera tout de même préférable d’utiliser les URLs classiques à travers l’API History.js d’HTML5
Pour palier à tout les problèmes, les Frameworks JavaScript proposent des modules additionnels pour mettre en place une telle navigation. Pour Vue.js il s’agit de vue-router qui découpe donc la Single Page Application en différentes routes selon le mode du # ou le mode History
C’est parti pour vue-router
On commence directement par la petite install avec npm !
npm install --save vue-router
Et la rien de plus simple, pour définir les différentes routes il suffit de créer une instance de Vue Router en l’important, et de préciser le mode (hashmode par défaut ou “history” pour manipuler de vraies URLs)
Dans cette instance il faut également déclarer notre objet “routes” qui représente la liste des chemins d’accès et des composants à afficher lorsque ce chemin est accédé (sans oublier le petit nom de la route ! )
Créons donc notre nouveau fichier AppRoutes.js !
Pour utiliser nos routes dans l’application, nous devons indiquer à notre instance principale de Vue d’utiliser notre router !
Et enfin pour permettre à nos composant principal (App.vue) d’appeler un composant selon le routing, on passe par le composant router-view
Tadaaaaam ! En allant sur http://localhost:8080/carpage normalement ça devrai fonctionner ;)
Et sur l’autre URL (localhost:8080/helloworld) le contenu de la page devrait changer pour retrouver le contenu de la partie 1 de ce tutoriel
Nous commençons de plus en plus à nous tourner vers une SPA fonctionnelle, vous aimez ça ? Alors on continue avec les paramètres de routes ! ;)
Accéder à l’URL courante et transmission de paramètres via l’URL !
Bon on a une URL. Maintenant on souhaite passer des paramètres à travers elle. Pour cela nous allons utiliser l’objet $route avec une implémentation comme ça :
this.$route.query[NomDuParamètre]
Reprenons notre bon vieux composant HelloWorld.vue, on enlève la valeur des data qu’on laisse a vite, et dans la méthode mounted() on va attribuer à firstname et lastname nos paramètre d’URL comme ceci :
On supprime également “from” vous avez compris son utilisation…
Bon, ça marche, mais je suppose que vous ne voulez pas passer des paramètres comme ça via l’URL mais essayer de rendre ça plutôt dynamique non ?
Ce qui pourrait être bien dans un premier temps c’est par exemple de passer l’ID d’une personne. Cela est possible grâce à la portion de l’URL qui est variable.
Prenons comme URL : localhost:8080/helloworld/:id
Ici l’ :id est notre portion variable. Elle pourra être remplacé par n’importe quelle valeur.
Mettons là dans nos routes à la place de celle existante :
Pour récupérer cette valeur dans notre composant, on utilise toujours $routes mais celle fois ci on utilisera “params” au lieu de “query”
this.$routes.params.[NomPropriétéDynamique]
Faisons le dans notre HelloWorld.vue !
Ce qui serait bien c’est d’afficher également l’ID passé en paramètre, pour ça.. on ajoute juste la data et on l’affiche comme on a l’habitude de le faire ;)
Comme on est un peu feignant on supprime pas ce qu’on a déjà fait alors on se rend à l’URL :
localhost:8080/helloworld/123?firstname=Jooohnn&lastname=Doe
Bon.. on a notre valeur dynamique. MAIS on limite fortement l’utilisation que l’on peut en faire puisque l’on ne pourra pas l’inclure simplement dans une page en transmettant la valeur à travers un attribut (props) HTML comme on l’a vu dans une partie précédente de ce tutoriel.
Pour remédier à ce problème : Il faut qu’on ajoute dans la définition de la route (AppRoutes.js) la propriété props pour que la portion de l’URL qui est dynamique soit accédée via les propriétés du composant.
Faisons cela, ajoutons la props comme ceci :
Et maintenant au lieu de l’utiliser dans notre mounted via une requête embêtant avec $route, on y accède simplement comme une props
Et voila le résultat! C’est simple non? Ce Framework.. *_*
Bon et si on se entrait un peu plus dans les détails de vue-router ?
Pour naviguer entre les pages, notre application à besoin du composant router-link
Améliorons notre application avec lui. Créons un composant Navigation.vue qui affichera simplement une liste de liens pour atteindre les différentes pages de notre SPA
On peut également utiliser la syntaxe suivante pour créer une liste de lien :
<router-link tag="li" to="/foo">
<a>/foo</a>
</router-link>Et changeons nos routes (AppRoutes.js) pour que notre “/” soit notre Navigation
Notre localhost:8080 est donc bien notre navigation :
Et au clic sur un lien nous nous retrouvons sur le composant souhaité
Il est également possible de passer une named route, que l’on peut décomposer comme ceci :
<router-link
to="{
name: 'helloworld',
params: { id: 123 }
}">
HelloWorld
</router-link>Et l’optimisation dans tout ça ?
Le Lazy Loading !
Bon, notre application fonctionne bien, le système de Routing aussi mais un problème persiste !
En effet, nous chargeons l’ensemble des composants en une fois au premier accès à l’application. Il serait plus judicieux (du moins en terme de performance) de ne charger que les composants utilisés dans notre “page” actuelle (asynchrone quand tu nous tient)
Et bien entendu Vue.js répond à cela et permet de charger des composants à la volée au travers une fonctionnalité de composant asynchrone. Cette fonctionnalité peut être associer à celle de code splitting de Webpack !
Le Splitting de Webpack permet de découper le code d’une application en plusieurs fichiers JS !
Comment faire tout ça ?
Commençons par les Routes ! Il faut spécifier le composant à utiliser de la façon suivante :
Avec ceci, si on regarde les différentes requêtes qui sont déclenchées à partir du navigateur dans l’inspecteur, on peut voir qu’une requête supplémentaire est lancé lorsque le lazy loading est activé.
Les Hoooooooooks
Avec vue-router !
Notre cher vue-router offre la possibilité d’intervenir très simplement à toutes les étapes du cycle de vie constituant la navigation d’un composant (page) à une autre via les Hooks
(vous vous rappelez les méthodes sur le cycle de vie..)
- BeforeEach et AfterEach
Ils s’appliquent à une instance de vue-router qui s’exécutent à tous les changements d’URL (avant début et/ou après fin de la navigation) | (Ils se déclarent au même endroit que la définition des routes)
Par exemple : on peut tester à cet endroit si un user à accès ou non à la page
- BeforeEnter: Directement sur une route
- BeforeRouteEnter | BeforeRouteUpdate | BeforeRouteLeave : Disponible au niveau des composants.
Par exemple : Bloquer la route avant d’y avoir accès, ou pour prévenir l’utilisateur qu’il va perdre les informations saisies
Comment fonctionnent les Hooks ?
Ils prennent en argument la route de destination (notre to)
Ils prennent également en argument la route de provenance (from)
Et ils prennent une fonction à appeler explicitement pour sortir du hook
L’exécution des hooks suit la logique suitevante :
- beforeRouteLeave
- beforeEach
- beforeRouteUpdate
- beforeEnter
- beforeRouteEnter
- afterEach
- afterEach
- beforeRouteEnter
Voici un exemple d’utilisation pour beforeEnter si cela peut vous aidez
Et voici également une implémentation de beforeEach (fonctionne de même pour afterEach) !
Merci d’avoir suivi ces 3 parties de tutoriel sur Vue.js ! La prochaine étape sera de couplé Vue.js à un Express.js pour comprendre les interactions Client/Server !
N’oubliez pas que la documentation officielle de Vue.js et celle de Vue Router (https://router.vuejs.org/api) sont très bien faites ! :) Surtout que la documentation Vue.js est disponibles et surtout en français !
