Apprendre Vue 3 : Routage avec Vue Router

Installation

CDN

Il est possible d’installer simplement Vue Router via un lien CDN disponible à l’adresse suivante : https://unpkg.com/vue-router@4

<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>

Gestionnaire de paquet (npm ou yarn)

La plupart du temps, on définit si notre application aura besoin d’être routée en début de projet. Vue.js nous propose en ce sens d’installer directement Vue Routeur dans une preset manuelle à l’initialisation d’un projet avec npm init vue@latest.

Procéder comme cela vous permettra de pré-configurer automatiquement votre application Vue.js pour travailler avec Vue Router.

Mais il est bien entendu également possible de l’installer ultérieurement avec un gestionnaire de paquet comme npm :

npm install vue-router@4

Création des pages

Avec Vue Router, une page est représentée par un composant. Ces composants sont généralement situés dans le dossier 📁 src/views.

Un composant de type page possède exactement la même structure que n’importe quel composant Vue.js.

<template>
	<div class="home">
		<h1>Accueil</h1>
	</div>
</template>

<template>
	<div class="about">
		<h1>A propos</h1>
	</div>
</template>

Mise en place du routage

Vue Routeur s’intègre parfaitement dans l’écosystème Vue.js en proposant un système de routage basé sur des composants.

On déterminera alors qu’un composant correspondra à une route, Vue Router s’occupera du reste.

Mise en place d’un routage rime souvent avec application d’ampleur conséquente. Nous allons donc travailler dans le cadre d’une app utilisant le Vite et les Single File Components.

On va commencer par externaliser notre routage dans un fichier dédié. Créons par exemple un dossier 📁 src/router dans lequel nous placerons un fichier 📄 index.js, contenant le code suivant :

import { createRouter, createWebHistory } from 'vue-router'

import HomeView from '../views/HomeView.vue'

const router = createRouter({
	history: createWebHistory(import.meta.env.BASE_URL),
	routes: [
		{
			path: '/',
			name: 'home',
			component: HomeView
		},
		// ...
	]
})

export default router

Importer vue-router

On importe les méthodes nécessaires depuis le module vue-router :

import { createRouter, createWebHistory } from 'vue-router'

Import de composants

Une fois créés, il faut les importer dans le routeur qui les exploitera pour définir les règles de routage.

import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'

Définition des routes

Nous allons définir nos routes au sein d’un objet JSON appelé la plupart du temps routes. Ces routes peuvent être statiques ou dynamiques.

Routes statiques

Les routes définies dans l’exemple précédent sont toujours statiques, c’est-à-dire qu’elles renvoient toujours le même contenu et le chemin (path) ne change jamais.

routes : [
	{
		path: '/',
		name: 'home',
		component: HomeView
	},
	{
		path: '/a-propos',
		name: 'about',
		component: AboutView
	}
]

• path (obligatoire) : contient la portion d’URL
• component (obligatoire) : fait référence au composant souhaité, créé précédemment
• name (optionnel) : permet de nommer la route pour pouvoir l’appeler plus simplement

Routes dynamiques

Parfois, nous avons besoin d’appeler une même route, mais en y faisant passer des paramètres au sein de la requête HTTP (GET, POST…).

Voici comment nous nous y prendrions :

routes : [
	// ...
	{
		path: '/profil/:id',
		name: 'show-profile',
		component: ProfileView
	}
]

Un paramètre de route est préfixé par :.

Le composant associé à cette route pourra récupérer le paramètre en question via this.$route.params.

Ici le composant ProfileView pourra travailler avec this.$route.params.id.

Création du routeur

Il est temps de créer le routeur grâce à la méthode createRouter().

const router = createRouter({
	history: createWebHistory(),
	routes: [
		// ...
	]
})

• history permet d’implémenter l’outil d’historique (hash ou HTML5)
• routes contient les routes déclarées préalablement

Export du routeur

Notre routeur étant configuré, nous allons l’exporter pour importation depuis le fichier 📄 main.js.

export default router

Chargement du routeur

Depuis le fichier 📄 main.js, instancier et monter l’app en lui associant le routeur :

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

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

app.use(router) permet à chacun des composants de route :

• D’avoir accès au routeur via this.$router. Cela s’avère très utile pour effectuer des redirections avec la méthode push().
• D’avoir accès aux informations de la route avec this.$route. Cela s’avère très utile pour récupérer des paramètres de route (this.$route.params.id par exemple).

Exploitation du routage

Dans les templates

Pour naviguer et ainsi exploiter le système de routage préalablement créé, on utilise des balises spécifiques.

<header>
	<nav>
		<RouterLink to="/">Accueil</RouterLink>
		<RouterLink to="/a-propos">A propos</RouterLink>
		<RouterLink :to="'/profil/' + user.id">Profil</RouterLink>
	</nav>
</header>
<RouterView/>

• <RouterLink> remplace la balise de lien hypertexte <a> que nous avions l’habitude d’utiliser. L’attribut href s’y voit remplacé par la prop to.
• <RouterView/> joue le rôle de conteneur dans lequel se greffera le template du composant appelé par la route.

Dans les scripts

Il est également possible d’appeler une route depuis les scripts (une méthode par exemple) grâce à la méthode this.$router.push().

Appel de route par le chemin

this.$router.push('a-propos')
this.$router.push({ path: 'a-propos' })

Appel de route par son nom

this.$router.push({ name: 'about' })

Appel de route dynamique avec transmission d’un paramètre de route

this.$router.push({ ..., params: { id: '10' } })

Appel de route avec des paramètres GET

this.$router.push({ ..., query: { param1: 'foo', param2: 'bar' } })