Vue ialah rangka kerja JavaScript yang popular untuk membina aplikasi satu halaman (SPA) dan antara muka pengguna yang kompleks. Walau bagaimanapun, apabila menggunakan Vue untuk membangunkan aplikasi, anda mungkin menghadapi beberapa masalah pelik, seperti skrin putih berkelip selepas melompat ke halaman. Masalah ini menjengkelkan kerana ia menjejaskan bukan sahaja pengalaman pengguna, tetapi juga prestasi dan kebolehpercayaan aplikasi.
Dalam artikel ini, kami akan meneroka punca dan penyelesaian kepada masalah ini. Kami akan memperkenalkan punca dan penyelesaian biasa skrin putih selepas melompat ke halaman untuk membantu pembangun Vue menyelesaikan masalah ini.
Dalam aplikasi Vue, apabila kami menavigasi ke laluan baharu, Vue memuatkan komponen dan data halaman secara tidak segerak. Proses ini mengambil sedikit masa, dan apabila halaman tidak dimuatkan sepenuhnya, kita akan melihat halaman kosong. Ini kerana Vue akan mengosongkan kandungan pada DOM terlebih dahulu sebelum memuatkan komponen dan data untuk memastikan halaman tersebut tidak mengalami masalah pemaparan yang lemah.
Proses ini sendiri bukanlah punca masalah, tetapi sebab halaman berkelip putih adalah kerana pengguna menunggu terlalu lama atau proses pemuatan halaman terganggu (seperti mengklik pautan navigasi dan halaman melompat ke halaman lain). Pada masa ini, halaman Vue akan menatal ke belakang dan memaparkan halaman kosong, yang akan membuatkan pengguna berasa sangat keliru dan tidak berpuas hati.
Terdapat banyak kaedah yang boleh anda gunakan semasa menyelesaikan masalah seperti ini. Dalam perenggan berikut, kita akan membincangkan beberapa penyelesaian biasa.
2.1. Tambah penunjuk pemuatan
Penyelesaian pertama ialah menambah penunjuk pemuatan, yang biasanya dipaparkan di tengah halaman untuk memberitahu pengguna bahawa halaman sedang dimuatkan. Dengan cara ini, pengguna tidak akan melihat skrin putih lagi kerana mereka akan melihat ikon atau mesej yang dimuatkan.
Untuk mencapai penyelesaian ini, kita boleh menggunakan pengawal 'beforeEach' dalam Penghala Vue. Dalam pengawal ini, kita boleh menambah animasi pudar global atau penunjuk pemuatan. Dengan cara ini, apabila laluan berubah, pengguna akan melihat animasi atau penunjuk yang ditentukan. Ini membolehkan pengguna mengetahui bahawa halaman masih dimuatkan dan harus menunggu halaman selesai dimuatkan.
2.2. Kurangkan masa memuatkan halaman
Masa memuatkan halaman juga merupakan salah satu punca masalah skrin putih. Jika halaman aplikasi anda mempunyai lebih banyak kebergantungan, masa muat halaman mungkin lebih lama. Untuk menyelesaikan masalah ini, anda boleh mempertimbangkan untuk mengurangkan bilangan kebergantungan atau memuatkan kebergantungan dengan menggunakan pemuatan tak segerak bagi modul. Dengan cara ini, masa muat halaman akan dikurangkan dengan banyak dan peluang skrin putih akan dikurangkan.
2.3. Menggunakan komponen tak segerak
Dalam Vue 2.x, Vue menyediakan fungsi komponen tak segerak. Komponen tak segerak membolehkan kami menangguhkan masa pemuatan komponen sehingga komponen itu benar-benar diperlukan untuk digunakan. Dalam komponen async, kami boleh menambah komponen pada fail JavaScript yang berasingan dan memuatkan fail tersebut apabila diperlukan.
Menggunakan komponen tak segerak boleh mengurangkan masa memuatkan halaman dan mengelakkan masalah skrin putih. Dalam Vue, komponen tak segerak sangat mudah digunakan. Hanya daftarkan komponen sebagai komponen berfungsi dan kembalikan komponen yang dimuatkan apabila diperlukan.
2.4. Menggunakan teg keep-alive
Teg keep-alive dalam Vue membolehkan kami mencache keadaan antara komponen supaya halaman dimuatkan dengan lebih cepat pada permintaan berikutnya. Teg Keep-alive boleh cache keadaan komponen dan elemen DOM supaya pada kali berikutnya komponen dimuatkan, ia tidak perlu dipaparkan semula, sekali gus mengurangkan masa muat halaman.
Menggunakan teg keep-alive juga boleh mengurangkan bilangan pemaparan semula halaman, sekali gus meningkatkan prestasi dan pengalaman pengguna. Dalam Vue, teg keep-alive sangat mudah digunakan Anda hanya perlu memasukkan komponen yang perlu dicache dalam teg keep-alive.
Semasa proses pembangunan Vue, masalah kilat halaman adalah masalah yang sangat biasa. Walau bagaimanapun, adalah penting untuk memahami punca dan penyelesaian masalah ini untuk meningkatkan prestasi halaman dan pengalaman pengguna. Kami boleh menyelesaikan masalah ini dengan mudah dengan menambahkan penunjuk pemuatan, mengurangkan masa pemuatan halaman, menggunakan komponen tak segerak dan menggunakan teg keep-alive. Hasilnya, kami boleh membina pengalaman pengguna yang lebih baik untuk aplikasi Vue dan meningkatkan prestasi dan kebolehpercayaan aplikasi.
Atas ialah kandungan terperinci Vue berkelip putih selepas melompat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!