Bagaimana untuk menggunakan penghalaan untuk menghantar dan menerima parameter dalam Vue?

Bagaimana untuk menggunakan penghalaan untuk menghantar dan menerima parameter dalam Vue?

Vue ialah rangka kerja JavaScript popular yang boleh digunakan untuk membina aplikasi web yang moden dan responsif. Dalam Vue, penghalaan ialah konsep penting, yang digunakan untuk mengurus navigasi dan lompatan antara halaman web. Semasa proses pembangunan, kami selalunya perlu menghantar data antara laluan yang berbeza. Artikel ini akan memperkenalkan cara menggunakan penghalaan untuk menghantar dan menerima parameter dalam Vue, dan memberikan contoh kod yang sepadan.

1. Melalui parameter laluan
   Dalam Vue, kita boleh menggunakan laluan parameter laluan untuk menghantar data dari satu laluan ke laluan yang lain. Terdapat beberapa cara untuk mencapai ini:

1.1 Parameter pertanyaan
Parameter pertanyaan ialah parameter dalam URL penghalaan, dalam bentuk ?key=value. Kita boleh menggunakan atribut pertanyaan bagi objek $route untuk mendapatkan parameter yang diluluskan. Berikut ialah contoh menggunakan parameter pertanyaan untuk menghantar parameter:

Dalam laluan penghantar, kita boleh menggunakan kaedah $route.router.push untuk melompat ke laluan penerima dan lulus parameter:

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

Dalam laluan penerima, Kita boleh menggunakan $route.router.query untuk mendapatkan parameter yang diluluskan:

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

1.2 Penghalaan dinamik
Penghalaan dinamik menggunakan parameter sebagai sebahagian daripada URL, dalam bentuk /:param. Kita boleh menggunakan $route.params untuk mendapatkan parameter yang diluluskan. Berikut ialah contoh penggunaan penghalaan dinamik untuk lulus parameter:

Dalam laluan penghantar, kita boleh menggunakan kaedah $route.router.push untuk melompat ke laluan penerima dan lulus parameter:

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

Dalam laluan penerima, Kita boleh menggunakan $route.params untuk mendapatkan parameter yang diluluskan:

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

2. Parameter penerimaan laluan
   Selepas menerima parameter yang diluluskan oleh laluan, kami boleh memproses dan menggunakannya dalam komponen sasaran. Berikut ialah contoh:

<template>
  <div>
    <h1 id="Welcome-to-the-receiver-page">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>

Contoh di atas menunjukkan cara menggunakan objek $route dalam komponen penerima untuk mendapatkan parameter pertanyaan atau parameter dinamik yang diluluskan oleh laluan. Kami menetapkan parameter yang diluluskan kepada atribut data komponen untuk digunakan dalam templat.

Ringkasan
Sangat mudah untuk menggunakan penghalaan untuk menghantar dan menerima parameter dalam Vue. Melalui parameter pertanyaan atau penghalaan dinamik, kami boleh menghantar data antara laluan dan memintanya diproses dan digunakan dalam komponen penerima. Sama ada parameter pertanyaan atau penghalaan dinamik, parameter yang diluluskan boleh diperolehi melalui objek $route. Saya harap artikel ini dapat membantu anda lebih memahami dan menggunakan fungsi lulus parameter penghalaan dalam Vue.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan penghalaan untuk menghantar dan menerima parameter dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!