Sebelum memaparkan halaman untuk laluan tertentu, saya ingin mendapatkan data yang diperlukan secara serentak. Sebaik-baiknya saya ingin mendapatkan data dalam komponen halaman, tetapi saya tidak menentang untuk melakukannya dalam fail penghala. Saya telah membaca dan mencuba pelbagai pendekatan, tetapi sebahagian daripada cabaran datang daripada fakta bahawa terdapat pelbagai cara untuk membina komponen, dan penggunaan ciri tertentu berbeza-beza.
Dalam kes saya, saya menggunakan API Komposisi dan
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Pertama sekali,
beforeRouteUpdatehanya dicetuskan apabila laluan sebenar dikemas kini, tetapi tidak pergi ke komponen/halaman lain seperti yang rasmidiberitahu di sini.Contoh perkara yang mungkin mencetuskan cangkuk kitaran hayat ialah
onBeforeRouteLeaveBerfungsi dengan sempurna seperti yang anda jangkakan apabila berpindah dari satu halaman ke halaman yang lain.Untuk soalan asal, anda boleh melaksanakan beberapa jenisperisian tengah penghalasepertiNuxt lakukan. Dengan cara ini anda boleh membuat
等待panggilan HTTP danhanya kemudianmembenarkan navigasi sebenar. Jadi hampir mungkin untuk mencipta kesan navigasi blok.Saya tidak pasti cara menulisnya menggunakan API Komposisi, tetapi saya tahu ia berfungsi dengan sempurna dengan API Pilihan (terdapat banyak catatan blog yang tersedia).
setupsendiri beroperasi dengan cara kitaran hayatnya sendiri, dan saya bayangkan banyak perkara yang agak rumit.TLDR: Pada pendapat saya, perisian tengah penghala + pembungkus halaman yang baik (seperti reka letak) ialah gabungan yang sempurna dalam kes anda. Di sana anda boleh menyediakan pemerhati untuk beberapa halaman pada masa yang sama.
Tetapi segala-galanya bergantung pada cara anda ingin mengatur diri anda dan menstruktur kod anda.
Skrin rangka memberikan rasa yang lebih pantas daripada menyekat, tetapi secara amnya anda juga boleh menggunakanprefetch (juga dihantar dengan Nuxt secara lalai) untuk mendapatkan beberapa petunjuk dan mungkin memuatkan beberapa sumber sebelum ia diperlukan. (+ helah lain dalam domain yang sama untuk mempercepatkan permintaan rangkaian anda)
Ada penyelesaian - gunakan await peringkat atas -https://vuejs.org/api/sfc-script-setup.html#top-level-await
Hanya bungkus komponen RouterView dalam komponen Suspense seperti ditunjukkan di bawah -https://vuejs.org/guide/built-ins/suspense.html#combining-with-other-components(Jangan gunakan komponen yang tidak diperlukan )
Satu-satunya perkara yang perlu diperhatikan ialah "skrin pemuatan" akan kelihatan pada permintaan awal.
Saya membuat sedikit demo untuk anda supaya anda boleh mencubanya -https://github.com/ileue/vue-top-level-await-demo