Explication détaillée de la méthode de saut de routage du routeur vue

Vue est un framework JavaScript populaire qui fournit de nombreuses fonctionnalités utiles, notamment Vue Router. Vue Router est un gestionnaire de routage officiellement recommandé qui peut vous aider à créer une application à page unique (Single Page Application). Vue Router propose une variété de méthodes de saut d'itinéraire, et cet article présentera ces méthodes.

1. Réaliser un saut d'itinéraire via un lien de routeur

Vue Router fournit un composant lien de routeur pour implémenter le lien de saut. Nous pouvons définir l'adresse de routage cible en spécifiant l'attribut to dans le composant. Le code est le suivant :

<router-link to="/home">Home</router-link>

Le code ci-dessus indique le passage à la page avec l'adresse de routage /home.

Nous pouvons également insérer des variables dans la valeur de l'attribut to, afin de réaliser un routage dynamique. Par exemple :

<router-link :to="&#39;/user/&#39; + userId">User</router-link>

Lorsque la valeur de userId change, la cible du saut changera également en conséquence.

2. Implémenter le saut de route via router.push

Vue Router fournit une méthode globale router.push pour implémenter le saut de route Nous pouvons l'appeler via la méthode this.$router.push dans le composant.

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

Le code ci-dessus indique le passage à la page avec l'adresse de routage /home.

Nous pouvons également passer un objet dans la méthode push pour implémenter un saut dynamique de l'itinéraire. Par exemple :

this.$router.push({ path: '/user', query: { userId: 123 }})

Le code ci-dessus signifie accéder à la page avec l'adresse de routage /user et apporter un paramètre de requête dans l'URL.

3. Implémenter le saut de route via router.replace

Vue Router fournit une méthode globale router.replace pour implémenter le saut de route contrairement à router.push, router.replace ne laisse pas d'historique lors du saut d'enregistrement. Le code est le suivant :

this.$router.replace('/home')

Identique à la méthode push, on peut passer un objet dans la méthode replace pour implémenter le saut dynamique de l'itinéraire.

4. Implémenter le saut d'itinéraire via router.go

Vue Router fournit une méthode globale router.go pour implémenter le saut d'itinéraire Lorsque vous sautez, vous pouvez reculer ou avancer la page dans l'historique. Le code est le suivant :

this.$router.go(-1)

Le code ci-dessus signifie restaurer une page.

5. Implémentez un garde d'itinéraire via router.beforeEach

Lorsque nous devons effectuer une série d'opérations avant un saut d'itinéraire, Vue Router fournit un garde d'itinéraire avantEach.

Nous pouvons définir la fonction beforeEach dans la configuration globale du routage. Cette fonction sera exécutée avant chaque saut de route. Le code est le suivant :

router.beforeEach((to, from, next) => {
  // ...
})

Le paramètre to représente les informations de routage à sauter, le paramètre from représente le routage. informations de la page actuelle, suivante La méthode est une fonction de rappel utilisée pour notifier le saut de routage s'il est terminé ou comment sauter.

Nous pouvons vérifier les autorisations des utilisateurs, l'état de connexion, etc. dans la fonction beforeEach, et décider de sauter ou de bloquer le saut en fonction des résultats de la vérification.

6. Implémentez la garde de route via router.afterEach

En plus de la fonction beforeEach, Vue Router fournit également une garde de route globale afterEach La fonction reçoit également deux paramètres vers et depuis. La différence est que la fonction afterEach est exécutée après. le saut de route est terminé.

Nous pouvons mettre à jour l'état de la page ou effectuer d'autres opérations dans la fonction afterEach.

Ci-dessus sont les différentes méthodes de saut de routage fournies par Vue Router. Elles conviennent chacune à différents scénarios. Nous pouvons choisir de les utiliser en fonction des besoins réels. Il convient de mentionner que pendant le processus de développement, nous pouvons afficher toutes les informations de routage de Vue Router dans la console du navigateur, ce qui est très utile pour le débogage et le développement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!