Routes et navigation avec Vue Router

Pour gérer efficacement la navigation entre les pages dans une application Vue.js, l'utilisation de Vue Router est recommandée. Elle permet de créer des applications monopage (SPA) où le routage est géré côté client, offrant une expérience utilisateur fluide sans rechargement complet de la page.

Installation de Vue Router

Pour intégrer Vue Router dans un projet Vue.js, il faut l'installer via npm :

npm install vue-router

Ensuite, il faut configurer le routeur en définissant les différentes routes de l'application et en les associant aux composants correspondants :

import { createRouter, createWebHistory } from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

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

export default router

Dans l'instance principale de Vue, il faut importer et utiliser le routeur :

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

Navigation entre les pages

Avec Vue Router, la navigation entre les pages peut être gérée à l'aide de liens :

<template>
  <nav>
    <router-link to="/">Accueil</router-link>
    <router-link to="/about">À propos</router-link>
  </nav>
  <router-view></router-view>
</template>

Le composant génère des liens qui permettent de naviguer sans recharger la page, tandis que le composant affiche le composant correspondant à la route actuelle.

Pour des applications nécessitant un routage simple sans dépendre d'une bibliothèque externe, il est possible de gérer le routage en rendant dynamiquement les composants en fonction du chemin actuel. Cependant, pour des applications plus complexes, l'utilisation de Vue Router est fortement conseillée en raison de ses fonctionnalités avancées et de sa facilité d'intégration.

Références:

• Openclassrooms: Gérez la navigation de votre application avec le routeur Vue https://openclassrooms.com/fr/courses/6390311-creez-une-interface-web-progressive-avec-vue-js/6863526-gerez-la-navigation-de-votre-application-avec-le-routeur-vue (page consultée le 20 février 2025)

• Documentation Vue.js: Routage https://fr.vuejs.org/guide/scaling-up/routing#official-router (page consultée le 20 février 2025)