Vue Router est l'outil de référence pour gérer la navigation dans les applications Vue.js. Il permet de passer d'une vue à l'autre de manière déclarative ou programmatique, tout en facilitant la gestion des données de navigation.

Navigation déclarative avec <router-link>

Le composant <router-link> est utilisé pour créer des liens de navigation. Il est préférable d'utiliser le nom de la route (name) plutôt que le chemin statique (path) pour plus de flexibilité.

Navigation simple

<!-- Utilisation du nom de la route -->
<router-link :to="{ name: 'dashboard' }">Tableau de bord</router-link>

<!-- Utilisation du chemin -->
<router-link :to="{ path: '/dashboard' }">Tableau de bord</router-link>

Passage de paramètres

Il existe deux méthodes principales pour transmettre des informations lors de la navigation : params et query.

<!-- Utilisation de params (souvent lié à des segments dynamiques) -->
<router-link :to="{ name: 'userProfile', params: { userId: 123 }}">Profil Utilisateur</router-link>

<!-- Utilisation de query (génère une URL de type ?search=vue) -->
<router-link :to="{ name: 'search', query: { category: 'electronics' }}">Recherche</router-link>

Navigation programmatique via l'instance du routeur

Dans la logique JavaScript (les méthodes d'un composant par exemple), on utilise l'objet $router pour déclencher les changements de vue.

La méthode push()

Cette méthode ajoute une nouvelle entrée dans la pile d'historique du navigateur.

// Navigation simple
this.$router.push('/settings');

// Avec des paramètres Query (visibles dans l'URL)
this.$router.push({ name: 'gallery', query: { mode: 'dark' } });

// Avec des paramètres Params
// Attention : si vous utilisez 'path', 'params' sera ignoré. Utilisez 'name'.
this.$router.push({ name: 'details', params: { itemId: 456 } });

La méthode replace()

Contrairement à push, replace ne crée pas de nouvel enregistrement dans l'historique. Elle remplace l'entrée actuelle.

this.$router.replace({ name: 'login' });

Comparaison : Query vs Params

Il est crucial de comprendre la distinction entre ces deux approches pour la gestion des données :

• Query : Les données sont concaténées à l'URL (ex: /page?id=1). Elles persistent après un rafraîchissement de la page. On y accède via this.$route.query.id.
• Params :
  • Si le paramètre est défini dans la configuration de la route (ex: path: '/user/:id'), il apparaît dans l'URL et persiste au rafraîchissement.
  • S'il n'est pas défini dans le chemin, les données sont transmises en mémoire. Elles disparaîtront si l'utilisateur actualise la page.
  • On y accède via this.$route.params.id.

Navigation dans l'historique

Pour simuler les boutons "Précédent" ou "Suivant" du navigateur, on utilise la méthode go().

// Reculer d'une page
this.$router.go(-1);

// Avancer de deux pages
this.$router.go(2);

Récupération des données dans le composant cible

Une fois arrivé sur la destination, les données sont accessibels via l'objet $route (et non $router).

// Dans le template
<p>ID utilisateur : {{ $route.params.userId }}</p>
<p>Filtre : {{ $route.query.category }}</p>

// Dans le script
export default {
 mounted() {
   const identifier = this.$route.params.userId;
   console.log('ID récupéré :', identifier);
 }
}