1. Site multi-pages

Présentation

Vue.js est souvent utilisé pour la réalisation de Single Page Applications. Cela sous-entend que l’ensemble du code HTML du site est chargé sur la machine du client à la première requête. Mais cela ne signifie pas pour autant que votre site doit visuellement être constitué d’une unique page.

Le plugin Vue-Router vous permet de gérer un site avec plusieurs pages au sein d’un projet Vue.js. Le fait d’avoir plusieurs pages à gérer côté front-end nécessite pour l’application de devoir gérer des logiques de routage, en particulier pour modifier l’URL de la page courante dans le navigateur web.

Dans ce chapitre, nous allons découvrir les bases du plugin Vue-Router et ainsi que comment obtenir une application Vue.js avec plusieurs pages.

Installation de Vue-Router

Pour ajouter le plugin Vue-Router comme un module de votre projet, rendez vous à la racine de votre projet avec le terminal Node.js et faites :

npm install vue-router@4

Vous pouvez ensuite importer le plugin depuis votre fichier main.js :

import createApp from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

const app = createApp(App)
app.use(VueRouter)
app.mount('#app')

Configuration de Vue-Router

Une fois installé, vous devez configurer le plugin pour lui indiquer comment traiter chaque page de votre application. Pour cela vous devez définir un tableau d’objets de cette forme :

import Page1 from "./pages/page1.vue"
import Page2 from "./pages/page2.vue"

const routes = [
  { path: '/', component: Page1 },
  { path: '/page2', component: Page2 }
]

Ici, Page1 et Page2 sont des composants gérant l’ensemble du contenu d’une page de notre application. Cette configuration va vous permettre d’associer un composant d’une page particulière en fonction de l’URL actuelle de votre navigateur.

Pour rendre cette configuration active, vous devez instancier un objet VueRouter et l’ajouter à l’instanciation de votre Vue :

const routes = [
  { path: '/', component: Page1 },
  { path: '/page2', component: Page2 }
]

const router = VueRouter.createRouter({
    history: VueRouter.createWebHistory(),
    routes
})

const app = createApp(App)
app.use(VueRouter)
app.mount('#app')

Vous devez toujours indiquer App comme votre composant servant de point d’entrée. C’est au sein de App que l’on pourra ensuite faire appel à nos différentes pages.

REMARQUE

👉 Ici, nous définissons VueRouter en mode history . Cela permet aux changements de page d’avoir une URL qui correspond à votre configuration. Exemple : https://my-domain.com/page2. Cela demande toutefois que votre serveur redirige bien tous les chemins de votre domaine vers votre application front-end une fois en production. Plus d’info dans la documentation de Vue Router sur le mode history.

Utiliser des routes

Vos routes maintenant configurées, vous pouvez les utiliser dans votre composant App ou dans n’importe quel autre composant de votre application.

Router view

Dans la partie template de notre App, nous pouvons maintenant choisir d’afficher le composant actuellement déterminé par notre route grâce à la balise router-view :

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

Si nous sommes actuellement à l’URL https://my-domain.com/, alors c’est le composant Page1 qui sera affiché à l’emplacement de notre balise. Si notre URL est https://my-domain.com/page2, le composant Page2 sera affiché dans la balise.

Router link

Pour vous déplacer d’une page à une autre dans votre application, vous pouvez utiliser la balise router-link, de façon similaire à l’usage de la balise a. Vous devez renseigner dans l’attribut to le chemin vers lequel vous souhaitez vous rendre dans votre domaine :

<template>
  <div>
    <router-link to="/page2">Go to Page 2</router-link>
  </div>
</template>

Votre balise peut contenir un simple texte, ou un bouton, ou tout autre élément HTML. Au clic sur ce contenu, vous serez redirigé et le contenu de vos balises router-view évoluera en conséquence.

Eléments de configuration avancée

Routes nommées

Il vous est possible de donner un nom à vos routes dans la configuration :

const routes = [
  { path: '', component: Page1, name:"myPage1"},
  { path: '/page2', component: Page2, name:"myPage2" }
]

Vous pouvez utiliser ce nom pour vous rediriger dans votre application au niveau des router-link :

<router-link :to="{ name: 'myPage2' }">Go to page 2</router-link>

Cela permet de découpler vos redirections de l’URL associée. Ainsi, si vous changez l’URL de la page 2, vous n’êtes pas obligé de parcourir votre application pour modifier toutes les balises router-link associées à votre page 2.

Routes par défaut

Il est souvent utile de rediriger vers une route par défaut si l’utilisateur indique un chemin qui n’est pas pris en compte dans votre configuration. Pour cela, vous pouvez utiliser le caractère * qui vous permet de désigner l’ensemble des routes possibles. Les routes de la configuration sont toujours lues de la première vers la dernière. Vous devez donc spécifier votre route par défaut en dernier, pour qu’elle ne soit prise en compte que si toutes les autres routes ne correspondent pas à l’URL actuelle :

const routes = [
  { path: '/', component: Page1},
  { path: '/page2', component: Page2},
  { path: '*', redirect: '/'},
]

Le champ redirect vous permet de modifier la valeur de l’URL, ce qui vous redirigera automatiquement sur une autre route, ici la Page1.

INFO

👉 L’URL affichée dans le navigateur sera elle-aussi modifiée par la redirection. Si j’indique https://my-domain.com/page3 dans notre exemple, je me retrouverai immédiatement sur https://my-domain.com/

Autres fonctionnalités

Les routes sont des fonctionnalités très complètes qui présentent bien d’autres mécaniques. Vous pouvez par exemple avoir des routes programmatives, qui vous permettent de récupérer dynamiquement des éléments présents dans votre URL et de les exploiter dans votre page.

Vous pouvez également associer à une URL plusieurs composants en même temps, afin de déterminer plusieurs éléments de vos pages en fonction de votre route grâce aux [router-view nommés](https://router.vuejs.org/guide/essentials/named-views.html).

Vous trouverez le détail sur ces fonctionnalités et bien d’autres dans la documentation de Vue-Router.

Aller plus loin

• Sur Vue Router en général :
  • la documentation
  • une vidéo de Grafikart
• Sur les routes imbriquées : la documentation
• Sur la navigation programmatique : la documentation