Créez une application web avec Vue.js

Créez le routage de votre application monopage

Comme nous l'avons vu précédemment, le terme « Applications monopages » (SPA) indique qu'une seule page est chargée. Cette dernière est ensuite mise à jour dynamiquement en fonction des besoins. Bien que cela soit puissant, il y a tout de même un défaut principal : les utilisateurs ont besoin d'URL différentes pour distinguer les différentes pages les unes des autres. Sinon, à chaque fois qu'un utilisateur essaie de revenir en arrière, il obtiendra toujours la même page !

Pour résoudre ce problème, tous les grands frameworks disposent d'une solution de routage. La solution recommandée par Vue est la bibliothèque officielle vue-router.

Installez Vue Router

Pour ajouter Vue Router à notre application, nous utiliserons Vue CLI :

vue add router

Une fois l'installation terminée, vous devriez observer que la CLI a modifié un certain nombre de fichiers afin de s'assurer que tout fonctionne correctement. Si vous ouvrez votre fichier  main.js, vous verrez que Vue CLI a automatiquement configuré la propriété Router en la rattachant à votre instance de Vue. De plus, un nouveau fichier est apparu, essentiel à la compréhension du routage :  router/index.js.

Découvrez l’anatomie du routeur

Lorsque vous ouvrez le fichier router/index.js dans votre éditeur de code, vous devriez voir quelque chose de similaire à ceci :

import Vue from 'vue' 
import Router from 'vue-router' 
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/about',
        name: 'About',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    }
  ]
})

Ici, les routes de notre application Vue sont définies via un tableau contenant des objets qui définissent chaque route. Chaque objet route contient trois propriétés clés :

• path (chemin) - l'URL correspondant au composant ;

• name (nom) - le nom de cette route pour l'étiquetage et le débuggage ;

• component (composant) - le composant qui doit s'afficher lorsque le path est trouvé.

Comprenez le fonctionnement de Vue Router

Il existe deux composants principaux que Vue Router utilise et que vous devrez apprivoiser pour vos applications :

• <router-view></router-view>  - il définit la zone de la page dans laquelle apparaîtra le composant que nous définissons dans chaque route. Il est particulièrement important si vous imbriquez des vues les unes dans les autres ;

• <router-link></router-link>  - similaire à la balise  anchor  en HTML, ce composant permet également la navigation de l'utilisateur dans l'application. Cependant, il est privilégié par rapport à l'utilisation d'une balise d'ancrage standard, car il dispose de fonctionnalités intégrées, comme le fait qu'il évite de recharger systématiquement la page.

Ces deux composants constituent la base de l'utilisation de Vue Router dans nos composants. Ils facilitent la navigation dans une application Vue.

Créez des routes dynamiques

Vous devrez parfois faire correspondre un modèle d'URL à une page spécifique. Par exemple, revenons à notre application de marché. Vous souhaitez avoir une page individuelle pour chaque élément du menu, mais vous souhaitez utiliser une même page ItemDetail.vue   pour voir le détail de l'élément. Pour cela, vous avez besoin que la route passe l'information de manière dynamique.

Vue Router règle ce problème en permettant le matching de route dynamique.

Dans l'exemple que nous venons d'expliquer, vous pourriez configurer votre route de la façon suivante :

const router = new VueRouter({
    routes: [
        // les parties dynamiques commencent par un deux-points
        { path: '/item/:name', component: ItemDetail }
    ]
})

Cela permet ensuite au composant  ItemDetail  d'extraire les paramètres à utiliser :

<div>Item: {{ $route.params.name }}</div>

Par conséquent, lorsque nous nous rendons à l'URL :  http://localhost:8080/item/croissant, notre page affiche :

<div>Article: croissant</div>

Entraînez-vous

Vous trouverez le code source des exercices dans le repo GitHub du cours dans le dossier  cafe-with-a-view. Pour commencer, consultez la branche  P2C3-Begin.

Instructions

1. Sauvegardez temporairement le contenu de  App.vue  dans un fichier séparé car il sera écrasé par l'installation.

2. Ajoutez le plugin  vue-router  à l'application et n'activez pas le mode historique lors de l'installation (Use history mode for router? =>  N).

3. Migrez les données temporairement sauvegardées de l'ancienne  App.vue  vers  Home.vue

4. Créez une route statique pour la page de contact à l'url  /contact

5. Migrez les coordonnées de  Home.vue  vers  Contact.vue

6. Ajoutez le lien du routeur de contact à  App.vue

7. Activez le mode historique dans la configuration de votre routeur.

En résumé

Félicitations à vous 🙌 ! Le routage peut être un peu difficile à mettre en place, mais vous savez maintenant :

•     installer Vue Router sur votre application Vue CLI sans le mode history ;

•     configurer des routes ;

•     utiliser  router-view  et  router-link  pour gérer le routage ;

•     utiliser le matching dynamique de route pour vos pages personnalisées.

Maintenant que nous pouvons contrôler la façon dont notre utilisateur navigue à travers notre application, il est temps de découvrir comment contrôler le moment où notre code est exécuté pendant le chargement de page. Alors, rendez-vous au prochain chapitre !