Naviguer de manière programmatique avec Vue Router dans Vue.js

Dans Vue.js, utiliser Vue Router est un moyen pratique de gérer la navigation dans notre application. Vue Router est le routeur officiel de Vue.js qui permet d'intégrer de manière transparente les composants de l'interface utilisateur dans le modèle de routage basé sur l'URL.

Naviguer avec this.$router.push('/chemin')

Dans Vue.js, pour naviguer de manière programmatique vers une autre route en utilisant Vue Router, il faut utiliser la méthode this.$router.push('/chemin'). Ce n'est pas this.$route.navigate('/chemin'), Vue.navigate('/chemin'), ni this.$router.goto('/chemin').

Par exemple, si nous voulons naviguer vers une page appelée 'Page1', nous utiliserions le code suivant dans notre composant Vue:

this.$router.push('/page1')

La valeur que nous passons à la méthode push est l'URL de la route vers laquelle nous souhaitons naviguer. L'utilisation de cette méthode est semblable à la manière dont on navigue en cliquant sur un lien <router-link> dans notre application.

Meilleures pratiques

Alors que this.$router.push() navigue directement à une route spécifique, il est souvent préférable de travailler avec des objets de route, plutôt que des chaînes de caractères. Cela permet d'avoir plus de flexibilité, comme l'ajout de paramètres d'URL ou de requêtes.

Par exemple :

this.$router.push({ name: 'user', params: { userId: '123' }})

Cela naviguera vers la route nommée 'user', avec le paramètre 'userId' défini à '123'.

En conclusion, this.$router.push() est une méthode essentielle lors de l'utilisation de Vue Router pour la navigation programmatique.