Comment utiliser le routage pour transmettre et recevoir des paramètres dans Vue ?

Comment utiliser le routage pour transmettre et recevoir des paramètres dans Vue ?

Vue est un framework JavaScript populaire qui peut être utilisé pour créer des applications Web modernes et réactives. Dans Vue, le routage est un concept important, utilisé pour gérer la navigation et les sauts entre les pages Web. Au cours du processus de développement, nous devons souvent transmettre des données entre différentes routes. Cet article expliquera comment utiliser le routage pour transmettre et recevoir des paramètres dans Vue, et fournira des exemples de code correspondants.

1. Passage des paramètres d'itinéraire
   Dans Vue, nous pouvons utiliser le passage des paramètres d'itinéraire pour transmettre des données d'un itinéraire à un autre. Il existe plusieurs manières d'y parvenir :

1.1 Paramètres de requête
Les paramètres de requête sont des paramètres dans l'URL de routage, sous la forme ?key=value. Nous pouvons utiliser l'attribut query de l'objet $route pour obtenir les paramètres transmis. Voici un exemple d'utilisation de paramètres de requête pour transmettre des paramètres :

Dans la route de l'expéditeur, nous pouvons utiliser la méthode $route.router.push pour accéder à la route du récepteur et transmettre les paramètres :

this.$router.push({
  path: '/receiver',
  query: {
    name: 'John',
    age: 25
  }
});

Dans la route du récepteur, Nous pouvons utiliser $route.router.query pour obtenir les paramètres transmis :

console.log(this.$route.query.name); // John
console.log(this.$route.query.age); // 25

1.2 Routage dynamique
Le routage dynamique utilise des paramètres dans le cadre de l'URL, sous la forme de /:param. Nous pouvons utiliser $route.params pour obtenir les paramètres transmis. Voici un exemple d'utilisation du routage dynamique pour transmettre des paramètres :

Dans la route de l'expéditeur, nous pouvons utiliser la méthode $route.router.push pour accéder à la route du récepteur et transmettre les paramètres :

this.$router.push({
  path: `/receiver/${this.name}/${this.age}`
});

Dans la route du récepteur, Nous pouvons utiliser $route.params pour obtenir les paramètres transmis :

console.log(this.$route.params.name); // John
console.log(this.$route.params.age); // 25

2. Paramètres de réception de la route
   Après avoir reçu les paramètres transmis par la route, nous pouvons les traiter et les utiliser dans le composant cible. Voici un exemple :

<template>
  <div>
    <h1>Welcome to the receiver page!</h1>
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      age: ''
    }
  },
  mounted() {
    this.name = this.$route.query.name;
    this.age = this.$route.query.age;
    // 或者 this.name = this.$route.params.name;
    //     this.age = this.$route.params.age;
  }
};
</script>

L'exemple ci-dessus montre comment utiliser l'objet $route dans le composant récepteur pour obtenir les paramètres de requête ou les paramètres dynamiques transmis par la route. Nous attribuons les paramètres transmis à l'attribut data du composant à utiliser dans le modèle.

Résumé
Il est très simple d'utiliser le routage pour transmettre et recevoir des paramètres dans Vue. Grâce aux paramètres de requête ou au routage dynamique, nous pouvons transmettre des données entre les routes et les traiter et les utiliser dans le composant récepteur. Qu'il s'agisse de paramètres de requête ou de routage dynamique, les paramètres transmis peuvent être obtenus via l'objet $route. J'espère que cet article pourra vous aider à mieux comprendre et utiliser la fonction de transmission des paramètres de routage dans Vue.

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!