Vue dan Vue-Router: Bagaimana untuk menggunakan parameter laluan dalam komponen kanak-kanak?

Vue dan Vue-Router: Bagaimana untuk menggunakan parameter laluan dalam komponen kanak-kanak?

Petikan:
Vue ialah rangka kerja JavaScript yang popular untuk membina antara muka pengguna. Vue-Router ialah pengurus penghalaan rasmi Vue, digunakan untuk melaksanakan fungsi navigasi untuk aplikasi satu halaman. Dalam pembangunan aplikasi, kita sering perlu menghantar parameter antara komponen, dan Vue-Router menyediakan cara mudah untuk menangani masalah ini. Artikel ini akan memperkenalkan cara menggunakan parameter penghalaan dalam subkomponen Vue dan memberikan contoh kod khusus.

1. Konfigurasikan parameter penghalaan
Apabila menggunakan Vue-Router, kita boleh mengkonfigurasi parameter penghalaan dengan menentukan laluan dengan parameter dalam konfigurasi penghalaan. Sebagai contoh, katakan kita mempunyai komponen bernama Artikel yang perlu menerima parameter untuk memaparkan kandungan artikel yang berbeza. Kita boleh menentukan laluan dengan parameter dalam konfigurasi penghalaan seperti berikut:

const router = new VueRouter({
  routes: [
    { path: '/article/:id', component: Article }
  ]
})

Dalam kod di atas, :id dalam laluan mewakili parameter Apabila mengakses /article/1, nilai id parameter ialah 1.

2. Gunakan parameter penghalaan dalam subkomponen
Dalam subkomponen Vue, kita boleh mengakses parameter penghalaan melalui objek $route. Kaedah khusus adalah seperti berikut:

export default {
  created() {
    console.log(this.$route.params.id)
  }
}

Dalam kod di atas, kami menggunakan fungsi cangkuk kitaran hayat Vue yang dicipta untuk menunjukkan cara menggunakan parameter penghalaan dalam sub-komponen. this.$route.params.id akan mengeluarkan nilai id parameter laluan.

3. Kemas kini parameter penghalaan secara dinamik
Kadangkala, kita perlu memaparkan kandungan yang berbeza berdasarkan parameter penghalaan yang berbeza dalam subkomponen yang sama. Dalam Vue, gunakan jam tangan untuk memantau perubahan dalam parameter penghalaan, dan kemudian kemas kini data komponen berdasarkan perubahan. Kaedah khusus adalah seperti berikut:

export default {
  watch: {
    '$route.params.id': function(newId, oldId) {
      this.fetchArticle(newId)
    }
  },
  methods: {
    fetchArticle(id) {
      // 根据id获取文章内容
    }
  }
}

Dalam kod di atas, kami menggunakan atribut jam tangan Vue untuk memantau perubahan dalam parameter penghalaan $route.params.id. Apabila parameter penghalaan berubah, kaedah fetchArticle dipanggil untuk mendapatkan kandungan artikel yang sepadan.

Kesimpulan:
Dalam Vue-Router, kita boleh mengkonfigurasi parameter penghalaan dengan mentakrifkan laluan dengan parameter dalam konfigurasi penghalaan. Dalam subkomponen Vue, parameter penghalaan boleh diakses melalui $this.$route.params. Pada masa yang sama, anda juga boleh menggunakan atribut jam tangan untuk memantau perubahan dalam parameter penghalaan dan mengemas kini data subkomponen berdasarkan perubahan.

Melalui pengenalan dan contoh kod artikel ini, saya harap pembaca dapat lebih memahami cara menggunakan parameter penghalaan dalam subkomponen dalam Vue, sekali gus membangunkan aplikasi Vue dengan lebih fleksibel. Pada masa yang sama, anda juga akan mempunyai pemahaman yang lebih mendalam tentang penggunaan Vue dan Vue-Router.

Pautan rujukan:

• Tapak web rasmi Vue: https://vuejs.org/
• Tapak web rasmi Vue-Router: https://router.vuejs.org/

Atas ialah kandungan terperinci Vue dan Vue-Router: Bagaimana untuk menggunakan parameter laluan dalam komponen kanak-kanak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!