VueJs: le routage

Le routage: qu’est-ce que c’est ?

VueJs permet le routage directement depuis votre navigateur. Mais qu’est-ce que le routage ? Dans le cas de VueJs, le routage permet de rediriger toutes les urls vers une seule et même page : la page principale, et en fonction de l’url, d’afficher un composant plutôt qu’un autre.

Exemple : on a un site avec une bannière, un barre de menu et un contenu. Si on souhaite que le clic sur le menu “contacts” nous ouvre l’url “…/contacts” et que cette url ne fasse que changer la partie contenu par un certain composant vueJs représentant la page contact, c’est du routage.

Avec vue-router, on redirige toutes les urls sur la page principale. Ensuite, vue-router nous permet de dire : telle url va afficher tel composant tout simplement. On peut même passer des propriétés aux composants… mais le principe est là.

Le gros avantage par rapport au routage côté serveur, c’est qu’ici, le routage se fait directement dans le navigateur côté client du coup, on ne recharge que la partie qui est modifiée, le reste est toujours affiché sans recharger toute la page.

Installer et configurer vue-router

Si vous avez suivi les instructions du bonus gratuit disponible en dessous de cet article, vous avez la possibilité d’installer des packages NPM. Voici la commande qui permet d’installer vue-router:

npm install vue-router

Une fois le package installé, il reste à l’initialiser dans le fichier js principal main.js en ajoutant ces quelques lignes:

import VueRouter from 'vue-router'
...
Vue.use(VueRouter);
...
const router = new VueRouter(...);
...
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

Ici, nous venons de faire les opérations de bases :

• Importer le package vue-router dans un objet VueRouter
• Dire à vue de l’utiliser via la ligne Vue.use(VueRouter)
• Déclarer une constante router qu’on va définir un peu plus bas et qui va contenir la configuration du routage proprement dite

Utiliser Vue-Router

Pour configurer quelle url sera redirigée vers quel composant, il suffit de revenir dans notre fichier principal main.js et de le modifier comme suite par exemple :

import Page1 from './components/Page1'
import Page2 from './components/Page2'
...
const router = new VueRouter({
  routes: [
    { path: '/p1', component: Page1 },
    { path: '/p2', component: Page2 }
  ]
});

Ici, on a:

• Importé nos 2 pages (composants) pour pouvoir les utiliser
• On a ensuite déclaré que l’url /p1 afficherait le composant Page1
• Et finalement que l’url /p2 afficherait le composant Page2

Mais où vont s’afficher ces composants ? On parle de composant pas de page entière. En effet, on vient de définir quel composant sera chargé en fonction de l’url, il reste donc à dire à quel endroit de notre page on va affiche le composant “Page1” ou “Page2” en fonction de l’url.

Pour se faire, il faut aller dans notre composant principal, celui qui représente la fameuse DIV principale de notre page d’index html.

Dans ce composant principal App.vue, on va placer le composant router-view qui sera remplacé à la volée par notre composant Page1 ou Page2 en fonction de l’url appelée :

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    
    <router-view></router-view>
  </div>
</template>

Passer des paramètres

Imaginons une page ou plutôt un composant qui permet d’affiche le détail des données d’un utilisateur. Pour pouvoir dire quel utilisateur on veut visualiser, on pourrait penser à une url du type …/user/123 pour afficher le détail de l’utilisateur 123. C’est ce qu’on appelle le routage avec paramètre et voici comment le déclarer dans notre object vue-router – fichier main.js :

import UserDetail from './components/UserDetail'
...
const router = new VueRouter({
  routes: [
    { path: '/p1', component: Page1 },
    { path: '/p2', component: Page2 },
    { path: '/user/:id', component: UserDetail }
  ]
});

Ici notre composant s’appelle UserDetail :

• Première étape, on l’importe pour pouvoir l’utiliser
• Seconde étape, on l’utilise dans les routes de notre vue-router mais avec une particularité : le “:id” qui est en fait un paramètre qui sera passé à la notre composant. Ce paramètre sera utilisable via “this.$router.params.id” tout simplement.

Voici le détail du code de notre composant UserDetail qui utilise le fameux paramètre id:

<template>
    <div>Voici le détail de l'utilisateur {{ this.$route.params.id }}</div>
</template>

<script>
export default {
    name: 'UserDetail'
}
</script>

Vous pouvez voir que c’est assez simple de récupérer la valeur d’un paramètre : this.$route.params.nom_du_paramètre.

Problème possible

Si vous avez une url du type http://localhost:8080/# dans votre navigateur, n’essayez pas de taper http://localhost:8080/p1 car il va rajouter # à la fin ce qui ne donnera rien de connu par le routage. Vous devez donc bien ajouter /p1 à la fin de tout ce qui donnera : http://localhost:8080/#/p1

Conclusion

Vous avez pu constater que le routage est assez simple, efficace, permet de ne charger que ce qui change et de manière dynamique en configurant simplement l’objet router dans le fichier principal main.js.

J’espère que cet article vous aura plu. N’hésitez pas à commenter et à le partager. Et si vous souhaitez ne rien rater, inscrivez-vous à ce blog pour recevoir tous les articles gratuitement.