Euh... Une route est une association entre une action (une URL) et un composant. C'est donc les pages de notre application. Nous avons... L'accueil, l'affichage d'une actualité, peut être une page pour afficher les mentions légales aussi.C'est pas mal. On va en rajouter quelques-unes, comme celle pour se connecter et celle pour modérer les commentaires postés sous les actualités. On aura également les pages d'erreur : si on tape une URL qui n'existe pas par exemple...
Bilan :
- Page d'accueil avec résumé des dernières actualités
- Page pour voir une actualité en particulier et ses commentaires
- Page des mentions légales
- Page pour se connecter
- Page pour modérer les commentaires
- Pages d'erreur (on les gèrera plus tard)
Évidemment, comme on ne traitera que le front de l'application, la connexion sera fictive. Mais cela ne nous empêchera pas de voir comment protéger les routes qui le nécessitent, notamment comment faire pour que seules les personnes connectées puissent accéder à la page de modération des commentaires par exemple !
Ok super ! Pour commencer, nous allons déjà voir la structure actuelle de notre application, c'est-à-dire ce qui a été généré par vue-cli.
Par rapport à un projet classique, ou en tout cas par rapport aux projets que tu faisais actuellement sans vue-router, qu'as-tu vu de nouveau ?
Il y a le dossier router, déjà. Avec le fichier index.js. Il y a également le dossier "views".En effet. Toutes les informations du routeur sont dans le dossier router avec le fichier index.js ! Le fichier est assez simple à lire.
Dans un premier temps, on importe les méthodes du routeur dont on a besoin. On importe aussi nos composants (donc, nos pages). Les composants sont situés dans le dossier views ;). À chaque route, un composant est dans ce dossier ! (Si tu as choisi "n" pour le history mode, dans ce cas c'est createWebHashHistory qui est importé)
{"language":"text/javascript","content":"import { createRouter, createWebHistory } from 'vue-router'\nimport Home from '../views/Home.vue'","filename":"index.js"}
Ensuite, on définit un tableau de... routes. Tout simplement !
{"language":"text/javascript","content":"const routes = [\n {\n path: '/',\n name: 'Home',\n component: Home\n },\n {\n path: '/about',\n name: 'About',\n // route level code-splitting\n // this generates a separate chunk (about.[hash].js) for this route\n // which is lazy-loaded when the route is visited.\n component: () => import(/* webpackChunkName: \"about\" */ '../views/About.vue')\n }\n]","filename":"index.js"}
Puis on crée notre routeur à partir de ces routes.
{"language":"text/javascript","content":"const router = createRouter({\n history: createWebHistory(process.env.BASE_URL),\n routes\n})\n\nexport default router","filename":"index.js"}
Fastoche non ?
À quoi sert le process.env.BASE_URL ? La fonction createWebHistory peut prendre un paramètre optionnel qui indique l'URL à laquelle ton application est rendue. Par exemple, si utilises vue-cli dans les conditions classiques, cette URL est http://localhost:8080 (en tout cas sur un UNIX-Like, sur Windows je ne sais pas!). Par défaut, ce sera l'URL de base du serveur sur lequel est lancé l'application. Ainsi, dans la plupart du temps, on n'a pas besoin de renseigner ce paramètre ! On en aurait besoin si, pour une raison ou une autre, notre serveur est http://localhost:8080/ mais que notre application doit être rendue sur http://localhost:8080/mon_application/.
Ici, process.env.BASE_URL fait référence à une hypothétique variable BASE_URL définie dans un .env. On pourrait alors mettre http://localhost:8080/mon_application/ dans cette variable :).
Comme tu l'auras compris, on n'a pas besoin de ce paramètre dans notre cas vu qu'on utilise vue-cli classiquement. On peut donc enlever process.env.BASE_URL ;)
Il est vrai que ça parait assez simple comme ça, la syntaxe est claire. Mais il y a quand même plusieurs zones d'ombre... Est-ce que tu peux m'expliquer plus en détail le fonctionnement des routes ? Bien sûr, j'allais y venir. Tu te rappelles, j'avais dit qu'une route était une action et un composant. Pour définir cette association, on doit créer un nouvel object qui contient ces deux éléments.
- path : c'est l'action. C'est la partie de l'URL qui sera utilisée pour trouver le bon composant
- component : c'est le composant associé
Ok, simple. Mais du coup, à quoi sert name ?À donner un nom à la route. C'est super utile.
Pourquoi est-ce super utile ? On a déjà l'URL, composée de l'adresse de notre site suivie de l'action... C'est suffisant non ? Les entreprises ont un nom de SIREN, unique, pourtant on les appelle par leur nom ! Certes, c'est peu comparable...
En fait, si c'est utile, c'est pour plusieurs raisons :
- Lorsque tu voudras mettre un lien qui redirige vers la page en question, pas besoin de se souvenir de l'URL. On met simplement le nom ;). Ça évite les erreurs !
- De même manière, si tu finis par changer d'URL à un moment pour telle route... Si tu la nommes, cela n'impacte pas le reste de ton application : en effet, les liens vers la page impactée ont été générés avec le nom et non pas avec l'URL.
Bien que cela puisse te paraitre un cas très rare le fait de changer d'URL, en réalité, cela arrive assez souvent. Et quand ça arrive, on est bien content d'avoir utilisé des routes nommées !
Ok pigé ! Dernière question concernant les routes... Pourquoi des fois on utilise "component: Home" et des fois "component: () => import(...)" ? Excellente question. Dans le second cas, tu fais du "lazy loading". Dans le premier, non. Le lazy loading est une façon de charger dynamiquement les composants dont on a besoin (nos pages). Cela signifie que Vue Router va charger le composant une seule fois : la première fois que l'utilisateur accède à une route liée à ce composant. Après, le composant est mis en cache, donc plus besoin d'aller le charger en dur !
L'autre intérêt est du côté de l'étape de bundling... Tu sais, l'étape où ton bundler (webpack par exemple) va regrouper tous les codes javascript. Avec une SPA, un chunk (fichier regroupant les codes) peut vite devenir très lourd, et donc long à charger. En important dynamiquement notre composant, on profite automatique du Code Splitting de Webpack, qui crée plusieurs chunks qu'il peut charger à la volée et en parallèle... On peut même préciser si l'on veut regrouper plusieurs routes dans un même chunk en utilisant des commentaires dédiés à Webpack.
Fiou, c'est un peu compliqué tout ça... C'est vrai, je le conçois. Si tu veux simplement retenir quelque chose de simple : il vaut mieux toujours utiliser la syntaxe "Lazy loading". C'est la documentation de vue router qui le conseille ;).
Parfait, je comprends mieux comme ça ! Entendu. Alors maintenant que tu sais tout sur les routes, il ne reste plus qu'à les créer ! Commençons par la page d'accueil. C'est facile, elle est déjà créée... Mais appliquons ce que nous venons d'apprendre : utiliser le lazy loading autant que faire se peut !
{"language":"text/javascript","content":"import { createRouter, createWebHistory } from 'vue-router'\nconst Home = () => import('../views/Home')\n\nconst routes = [\n {\n path: '/',\n name: 'Home',\n component: Home\n },\n {\n path: '/about',\n name: 'About',\n component: () => import(/* webpackChunkName: \"about\" */ '../views/About.vue')\n }\n]\n\nconst router = createRouter({\n history: createWebHistory(),\n routes\n})\n\nexport default router\n","filename":"index.js"}
Ensuite, faisons deux autres routes : celle pour se connecter et celle pour les mentions légales. D'abord, je te laisse deux composants dans le dossier "views" : Legals et Connexion.
{"language":"text/javascript","content":"import { createRouter, createWebHistory } from 'vue-router'\nconst Home = () => import('../views/Home')\nconst Legals = () => import('../views/Legals')\nconst Connexion = () => import('../views/Connexion')\n\nconst routes = [\n {\n path: '/',\n name: 'Home',\n component: Home\n },\n {\n path: '/mentions-legales',\n name: 'Legals',\n component: Legals,\n },\n {\n path: '/connexion',\n name: 'Connexion',\n component: Connexion\n }\n]\n\nconst router = createRouter({\n history: createWebHistory(),\n routes\n})\n\nexport default router\n","filename":"index.js"}
Bon, et si on essayait tout ça, qu'en dis-tu ? Je te laisse démarrer le serveur de développement vue-cli :
{"language":"shell","content":"npm run serve","filename":"console"}
Alors, qu'est-ce qui s'affiche ?
J'ai une page d'accueil avec les liens "Home", "About" et ensuite le logo de Vue.JS et quelques autres informations par défaut...C'est cela !
Mais, pourquoi il s'affiche "Home" et "About" comme liens, et pas "Home", "Mentions légales" et "Connexion" ? Hé bien... C'est ce que nous allons voir juste après dans la prochaine partie ;).
Ok ! Mais attends, on a oublié des routes là ! Par exemple, celle pour voir une actualité en particulier :oC'est vrai. En réalité, on ne les a pas oubliées ! Mais nous devons voir quelques petites choses avant, car ces routes sont assez particulières... Nous y reviendrons ! J'ai terminé cette partie