Apakah yang perlu saya lakukan jika 'Ralat dalam panggilan balik untuk pemerhati 'xxx': 'TypeError: Tidak boleh membaca sifat 'yyy' null'' berlaku apabila menggunakan vue-router dalam aplikasi Vue?

Vue ialah rangka kerja bahagian hadapan yang popular yang menyediakan pembangun dengan alatan berkuasa untuk membina aplikasi satu halaman (SPA) dengan lebih cekap. vue-router ialah pemalam pengurusan penghalaan rasmi Vue, yang boleh merealisasikan pengurusan SPA navigasi halaman dengan mudah. Walau bagaimanapun, sesetengah pepijat kadangkala berlaku apabila menggunakan vue-router, yang paling biasa ialah ralat pemerhati.

Di bawah, kami akan membincangkan penyelesaian kepada ralat "Ralat dalam panggilan balik untuk pemerhati xxx: TypeError: Tidak boleh membaca sifat 'yyy' null" apabila menggunakan vue-router dalam aplikasi Vue.

Apakah ralat pemerhati?

Dalam aplikasi Vue, pemerhati ialah alat yang sangat berguna. Mereka menggunakan sifat yang dikira untuk menjejaki perubahan dalam data, dan apabila data berubah, pemerhati secara automatik mengemas kini komponen yang sepadan. Walau bagaimanapun, kadangkala terdapat beberapa masalah dalam kod yang menghalang pemerhati daripada berfungsi dengan betul, menyebabkan ralat muncul.

Semasa navigasi halaman, vue-router sering menggunakan pemerhati untuk mengesan perubahan penghalaan. Jika masalah berlaku semasa pertukaran laluan, ralat pemerhati mungkin dicetuskan. Punca biasa ralat ini ialah cuba membaca data daripada nilai nol. Contohnya:

Error in callback for watcher "route": "TypeError: Cannot read property 'name' of null"

Ini bermakna komponen cuba membaca atribut "nama" daripada nilai nol, yang tidak ada, maka ralat itu.

Ubah suai kod anda untuk mengelakkan ralat

Biasanya, ralat pemerhati berpunca daripada ralat pengekodan. Situasi yang paling biasa ialah percubaan untuk mengakses pembolehubah atau komponen yang tidak ditentukan yang tidak dimuatkan semasa navigasi halaman.

Cara terbaik ialah menambah beberapa pemeriksaan keselamatan dalam kod untuk memastikan tiada masalah dengan kod. Sebagai contoh, kita boleh menggunakan operator "perantaian pilihan" JavaScript untuk mengelakkan membaca data daripada nilai nol. Ini ialah kaedah baharu yang diperkenalkan dalam standard ECMAScript 2020.

Berikut ialah contoh kod menggunakan rantaian pilihan:

computed: {
  title() {
    return this.$route?.meta?.title || 'My Application';
  }
}

Dalam kod di atas, kami menggunakan operator rantaian pilihan "?." untuk memastikan kedua-dua $route dan objek meta wujud. Jika ada, sifat tajuknya dikembalikan jika tidak, tajuk lalai "Permohonan Saya" dikembalikan.

Kami juga boleh menggunakan pernyataan bersyarat JavaScript untuk menyemak sama ada pembolehubah dan komponen ditakrifkan atau dimuatkan. Contohnya:

export default {
  name: 'MyComponent',
  computed: {
    title() {
      if (this.$route && this.$route.meta && this.$route.meta.title) {
        return this.$route.meta.title;
      } else {
        return 'My Application';
      }
    }
  }
}

Dalam contoh ini, kami menggunakan pernyataan if untuk menyemak sama ada $route dan objek meta wujud, dan sama ada atribut tajuknya wujud. Jika kedua-duanya wujud, atribut tajuk dikembalikan jika tidak, tajuk lalai "Aplikasi Saya" dikembalikan.

Ringkasan

Ralat pemerhati adalah salah satu masalah biasa dalam program Vue. Apabila menggunakan vue-router, ralat ini biasanya bermakna bahawa komponen cuba membaca data daripada pembolehubah yang tidak ditentukan atau komponen yang tidak dimuatkan. Kita boleh mengelakkan ralat ini dengan menggunakan ciri JavaScript baharu seperti rantaian pilihan atau pernyataan bersyarat untuk menyemak kewujudan pembolehubah dan komponen. Selalunya, mengubah suai kod untuk mengelakkan pepijat pemerhati adalah penyelesaian yang lebih baik daripada cuba membetulkan mekanisme buggy itu sendiri.

Atas ialah kandungan terperinci Apakah yang perlu saya lakukan jika 'Ralat dalam panggilan balik untuk pemerhati 'xxx': 'TypeError: Tidak boleh membaca sifat 'yyy' null'' berlaku apabila menggunakan vue-router dalam aplikasi Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!