Vue-Router : Comment utiliser la navigation programmatique dans une application Vue ?

Vue-Router : Comment utiliser la navigation programmatique dans l'application Vue ?

Vue-Router est le gestionnaire de routage officiellement fourni par Vue.js. Il nous permet de gérer la relation de mappage de routage entre les pages de l'application et d'obtenir l'effet d'une application à page unique. Dans Vue-Router, la navigation est divisée en deux types : la navigation déclarative et la navigation programmatique.

La navigation déclarative est définie à l'aide du composant b988a8fd72e5e0e42afffd18f951b277, qui est essentiellement un composant Vue. Nous pouvons utiliser l'attribut to dans b988a8fd72e5e0e42afffd18f951b277 pour spécifier le lien de navigation, et Vue-Router mappera automatiquement l'attribut to à un itinéraire dans l'application.

La navigation programmatique implémente la navigation en écrivant du code JavaScript. Il permet aux développeurs d'appeler directement l'API fournie par Vue-Router dans le code pour implémenter la navigation dans les pages. La navigation programmatique peut fournir un moyen plus flexible lorsqu'une navigation dynamique dans une application Vue ou un contrôle de logique métier dans l'application est requis.

Ci-dessous, nous utiliserons quelques exemples de code pour démontrer la méthode d'implémentation de la navigation programmatique de Vue-Router.

1. Sauter vers l'itinéraire spécifié

Pour accéder à l'itinéraire spécifié, nous pouvons utiliser la méthode $router.push fournie par Vue-Router. Cette méthode accepte un chemin ou une route nommée comme paramètre et accède au chemin ou à la route spécifié.

<template>
  <div>
    <button @click="goHome">返回主页</button>
  </div>
</template>

<script>
export default {
  methods: {
    goHome() {
      this.$router.push('/')
    }
  }
}
</script>

Dans le code ci-dessus, nous fournissons un bouton, et lorsque vous cliquez sur le bouton, la méthode goHome est appelée pour naviguer vers la page d'accueil.

Semblable à la méthode push, Vue-Router fournit également la méthode $router.replace, qui peut remplacer directement l'URL actuelle sans laisser d'historique. Ceci est utilisé lorsque vous devez passer d’une page à une autre.

2. Sauter à l'itinéraire précédent

Lorsque nous devons passer à l'itinéraire précédent, nous pouvons utiliser la méthode $router.back fournie par Vue-Router. Cette méthode permet d'accéder à l'itinéraire précédent dans l'historique de l'application.

<template>
  <div>
    <button @click="goBack">返回上一页</button>
  </div>
</template>

<script>
export default {
  methods: {
    goBack() {
      this.$router.back()
    }
  }
}
</script>

3. Sauter à l'itinéraire suivant

De la même manière que pour passer à l'itinéraire précédent, nous pouvons utiliser la méthode $router.forward fournie par Vue-Router pour accéder à l'itinéraire suivant dans l'historique de l'application.

<template>
  <div>
    <button @click="goForward">前往下一页</button>
  </div>
</template>

<script>
export default {
  methods: {
    goForward() {
      this.$router.forward()
    }
  }
}
</script>

4. Sauter à l'itinéraire nommé

Dans Vue-Router, nous pouvons définir un nom pour l'itinéraire. Si nous devons naviguer vers une route nommée, nous pouvons utiliser la méthode $router.push fournie par Vue-Router et transmettre un nom en tant que paramètre.

<template>
  <div>
    <button @click="goToAbout">前往关于页面</button>
  </div>
</template>

<script>
export default {
  methods: {
    goToAbout() {
      this.$router.push({ name: 'about' })
    }
  }
}
</script>

Dans le code ci-dessus, nous fournissons un bouton. Lorsque vous cliquez sur le bouton, la méthode goToAbout est appelée pour parcourir l'itinéraire vers la page À propos. Le chemin vers la page À propos est défini en appelant la configuration de routage nommée de Vue-. Routeur.

Résumé

Dans Vue-Router, la navigation programmatique offre une manière plus flexible et dynamique de gérer les itinéraires. Nous pouvons utiliser les API fournies par Vue-Router telles que $router.push, $router.replace, $router.back et $router.forward pour sauter. Dans le même temps, nous pouvons également utiliser des itinéraires nommés pour la navigation. Lorsque vous utilisez la navigation par programmation, vous devez être conscient que les opérations de navigation peuvent déclencher un nouveau rendu de page et éviter de provoquer un comportement inattendu dans les opérations de navigation.

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!