laluan suis penghalaan vue tidak dimuat semula

Dalam pembangunan Vue, penghalaan ialah konsep yang sangat penting. Ia boleh membantu kami menukar halaman dan mengurus status halaman yang berbeza dengan mudah. Apabila menggunakan penghalaan Vue, kadangkala halaman tidak dimuat semula apabila penghalaan ditukar. Artikel ini akan meneroka isu ini dari beberapa aspek.

1. Gambaran keseluruhan penghalaan

Dalam Vue, penghalaan ialah konsep yang sangat penting. Penghalaan merujuk kepada laluan atau pautan yang digunakan semasa bertukar antara halaman. Dengan mentakrifkan laluan dalam komponen Vue, kami boleh melaksanakan penukaran halaman dan pengurusan keadaan. Operasi menggunakan penghalaan dalam Vue pada asasnya bergantung pada pemalam Penghala Vue.

2. Masalah muat semula laluan

Dalam pembangunan Vue, kadangkala kami mendapati halaman tidak dimuat semula semasa menukar laluan. Ini akan menyebabkan data dalam halaman tidak dikemas kini, sekali gus menjejaskan paparan biasa halaman. Jadi mengapa ini berlaku? Kita boleh membincangkannya dari aspek berikut.

1. Cache penyemak imbas

Cache penyemak imbas bermakna penyemak imbas akan secara automatik cache beberapa data apabila melawat tapak web supaya halaman itu boleh dimuatkan dengan lebih cepat pada kali berikutnya anda melawat. Apabila kami melawat halaman yang sama, penyemak imbas membaca data daripada cache dan bukannya mengambil semula data daripada pelayan. Ini akan mengakibatkan data pada halaman tidak dikemas kini dan tidak dimuatkan semula.

Untuk mengelakkan situasi ini, kita boleh menggunakan kaedah berikut:

Apabila penghalaan ditukar, tetapkan masa cache unik untuk setiap laluan, untuk memastikan ia boleh dimuat semula setiap masa ia diakses. Dapatkan data daripada membacanya daripada cache penyemak imbas.

2.keep-alive

Terdapat juga komponen keep-alive dalam Vue, yang boleh membantu kami cache contoh komponen dan memaparkan semula komponen cache apabila diperlukan. Jika komponen keep-alive digunakan semasa menukar laluan dan masa cache tidak ditetapkan, komponen tidak akan dipaparkan semula apabila laluan ditukar, menyebabkan halaman tidak dimuat semula.

Untuk menyelesaikan masalah ini, kami boleh menetapkan atribut sertakan dan tidak termasuk pada komponen keep-alive untuk mengawal komponen mana yang perlu dicache dan komponen mana yang perlu dipaparkan semula. Pada masa yang sama, kami juga boleh menetapkan atribut maks untuk mengawal bilangan maksimum cache untuk mengelakkan limpahan memori.

3. Pengawal laluan

Anda boleh menggunakan pengawal laluan untuk menangani masalah penukaran penghalaan. Dalam fungsi cangkuk beforeRouteUpdate, anda boleh mencetuskan kaedah tersuai dalam komponen untuk mencapai pengambilan data dan muat semula halaman.

Terdapat empat pengawal laluan dalam Vue: beforeEach, beforeResolve, afterEach dan beforeRouteUpdate. Fungsi cangkuk beforeRouteUpdate dicetuskan apabila laluan ditukar dan hanya akan dicetuskan apabila komponen semasa digunakan semula. Oleh itu, kami boleh melakukan operasi yang berkaitan dalam fungsi cangkuk ini untuk mengelakkan masalah halaman tidak menyegarkan.

3 Penyelesaian

Untuk menangani masalah tidak menyegarkan halaman apabila penghalaan ditukar, kami boleh menggunakan penyelesaian berikut:

1.

2. Tetapkan atribut sertakan dan kecualikan pada komponen keep-alive untuk mengawal caching dan rendering semula komponen.

3 Gunakan fungsi cangkuk beforeRouteUpdate dalam pengawal laluan untuk mencetuskan kaedah tersuai dalam komponen.

4. Gunakan kaedah penghalaan yang berbeza, seperti menggunakan kaedah router.push dan bukannya kaedah router.go.

Ringkasnya, untuk mengelakkan masalah tidak menyegarkan halaman apabila penghalaan ditukar, kita perlu menyelesaikannya dari pelbagai aspek. Dalam proses pembangunan sebenar, kita perlu memilih penyelesaian yang paling sesuai mengikut situasi tertentu untuk memastikan paparan biasa halaman.

Atas ialah kandungan terperinci laluan suis penghalaan vue tidak dimuat semula. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!