VueJS - Gestion des routes : Un guide pour débutants pour naviguer dans votre application Vue

Salut à toi, futurs maîtres de Vue ! Aujourd'hui, nous allons entreprendre un voyage passionnant à travers le monde du routage Vue. Pensez au routage comme au GPS de votre application Vue - il aide vos utilisateurs à naviguer d'une page à une autre sans recharger réellement tout le site. Génial, non ? C'est parti !

Qu'est-ce que le routage Vue ?

Imaginons que vous construisez une maison (votre application Vue). Vous ne voudriez pas que vos invités entrent par la fenêtre chaque fois qu'ils veulent aller dans une autre pièce, n'est-ce pas ? C'est là que le routage entre en jeu - c'est comme créer des portes appropriées entre les pièces de votre application.

Vue Router est la bibliothèque officielle de routage pour Vue.js. Il vous permet de mapper des composants à différents chemins d'URL, créant une expérience d'application à page unique fluide.

Configuration du Vue Router

Premièrement, installons Vue Router. Ouvrez votre terminal et exécutez :

npm install vue-router

Maintenant, créons une configuration de route de base :

// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

Vue.use(VueRouter)

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

const router = new VueRouter({
routes
})

export default router

Dans cette configuration, nous importons Vue et VueRouter, puis nous disons à Vue d'utiliser VueRouter. Nous définissons nos routes dans un tableau, où chaque route est un objet spécifiant le chemin, le nom et le composant à rendre.

Utilisation de Router-Link et Router-View

Maintenant que nous avons configuré nos routes, comment les utilisons-nous ? Entrez <router-link> et <router-view>.

Router-Link

<router-link> est un composant qui permet aux utilisateurs de naviguer entre les pages. C'est comme un <a> tag surpuissant. Voici comment vous l'utilisez :

<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav>
<router-view/>
</div>
</template>

Router-View

<router-view> est où la magie opère. C'est un composant qui affiche le contenu de la route qui correspond à l'URL actuelle. Pensez-le comme un emplacement où vos composants seront rendus.

Propriétés pour Router-Link

<router-link> vient avec plusieurs propriétés qui vous permettent de personnaliser son comportement. Voici quelques-unes des plus courantes :

Propriété	Description	Exemple
to	Spécifie la route cible	<router-link to="/about">About</router-link>
replace	Navigue sans pousser une nouvelle entrée dans l'historique	<router-link to="/about" replace>About</router-link>
append	Ajoute le chemin au chemin actuel	<router-link to="child" append>Child</router-link>
tag	Spécifie le tag à utiliser pour rendre le composant	<router-link to="/about" tag="li">About</router-link>
active-class	Classe à appliquer lorsque le lien est actif	<router-link to="/about" active-class="active">About</router-link>
exact	Correspond exactement à la route	<router-link to="/" exact>Home</router-link>

Navigation Programmatique

Parfois, vous pourriez vouloir naviguer depuis votre code JavaScript. Vue Router fournit des méthodes pour cela :

// Aller à la page About
this.$router.push('/about')

// Retourner en arrière
this.$router.go(-1)

// Remplacer l'entrée actuelle de l'historique
this.$router.replace('/about')

Correspondance de Route Dynamique

Souvent, nous avons besoin de mapper des routes avec le même composant mais des paramètres différents. Par exemple, une page de profil utilisateur où l'ID de l'utilisateur fait partie de l'URL. Nous pouvons y parvenir avec des segments dynamiques dans le chemin :

const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
]
})

Dans cet exemple, :id est le segment dynamique. Vous pouvez y accéder dans votre composant via this.$route.params.id.

Routes嵌套

À mesure que votre application grandit, vous pourriez vouloir imbriquer des composants les uns dans les autres. Vue Router le rend facile :

const router = new VueRouter({
routes: [
{
path: '/user/:id',
component: User,
children: [
{
path: 'profile',
component: UserProfile
},
{
path: 'posts',
component: UserPosts
}
]
}
]
})

Cette configuration permet des URLs comme /user/123/profile et /user/123/posts.

Gardiens de Navigation

Enfin, parlons des gardiens de navigation. Ce sont des hooks fournis par Vue Router pour protéger les navigations en les redirigeant ou en les annulant. Ils sont comme les gardiens de votre application, contrôlant qui entre et qui ne le fait pas.

Voici un exemple simple d'un garde global avant :

router.beforeEach((to, from, next) => {
if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
else next()
})

Ce garde vérifie si l'utilisateur est authentifié avant de permettre la navigation vers toute route autre que 'Login'.

Et voilà, les amis ! Nous avons fait le tour des bases du routage Vue, de la configuration des routes à leur protection. Souvenez-vous, la pratique rend parfait, donc n'ayez pas peur d'expérimenter avec ces concepts dans vos propres projets. Bon codage, et que vos routes vous mènent toujours là où vous voulez aller !

Credits: Image by storyset