Cours 15 - Routes avec Vue Router

Table des matières

Objectifs

Déroulement

Qu’est-ce que Vue Router ?

Vue Router est une bibliothèque de routage pour les applications web Vue.js. Le routage permet à l'utilisateur de naviguer entre différentes pages ou vues de l'application en fonction de l'URL qu'il visite. Vue Router permet de définir des routes pour les différentes vues de l'application et de gérer la transition entre ces routes.

Avec Vue Router, vous pouvez créer des routes qui correspondent à des URL spécifiques et qui sont associées à des composants Vue.js. Par exemple, vous pouvez créer une route pour "/home" qui est associée à un composant qui affiche la page d'accueil de l'application. Lorsqu'un utilisateur visite l'URL "/home", Vue Router affiche automatiquement le composant correspondant.

Vue Router prend également en charge les fonctionnalités avancées telles que:

Il offre également des fonctionnalités de navigation avancées telles que

Concept de page

Une page (view) est un concept de Vue Router. C'est un composant Vue.js associée à une route spécifique dans l'application. Une page est généralement composée de composants Vue.js.

IMPORTANT: un composant de View doit avoir le nom suivant: nomcomposantView.vue

Installation de Vue Router

Pour installer Vue Router, consulter la documentation:
https://router.vuejs.org/installation.html

Pour installer Vue Router il y a deux méthodes:

À partir de zéro

Commande NPM

npm init vue@3

Questions à répondre:

Ensuite, faire les commandes proposées à l'écran

À partir d'un projet existant

Pour ajouter Vue Router à un projet existant, suivre cette procédure.

Commande NPM

npm install vue-router@4

NOTE: Le @4 veux dire qu'on installe la version 4 de Vue Router!

Dans le fichier main.ts, remplacer le code par celui-ci:

import './assets/main.css'

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

const app = createApp(App)

app.use(router)

app.mount('#app')

Dans App.vue, on importe ce qu'on a besoin de Vue Router:

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
</script>

Atelier 15 - Exemple de routes

En utilisant les fichiers de l'atelier 15 suivant:
atel15.zip

Et en écoutant la vidéo de démonstration suivante:

Concernant le serveur backend dans le code de l'exemple

Faire les lectures et comprendre le code qui se trouve dans le projet exemple-vue-router. Pendant la lecture, ne pas hésiter à exécuter le code dans le navigateur et exécuter les tests.

Recherche de fichier dans VSCode
Pour rechercher un fichier dans VSCode, utiliser la commande Ctrl+P et taper le nom du fichier. Pour rechercher un fichier dans un dossier, taper le nom du dossier suivi d'un slash / et du nom du fichier.

Remise

Aucune remise pour cet atelier.