Cara terbaik untuk pramuat data laluan sebelum mengakses laluan.

Question

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

Answer 1

Pertama sekali, beforeRouteUpdate hanya dicetuskan apabila laluan sebenar dikemas kini, tetapi tidak pergi ke komponen/halaman lain seperti yang rasmi diberitahu di sini .

Contoh perkara yang mungkin mencetuskan cangkuk kitaran hayat ialah

<button @click="$router.push({ hash: `#${Math.floor(Math.random() * 10)}` })">
  random hash
</button>

onBeforeRouteLeave Berfungsi dengan sempurna seperti yang anda jangkakan apabila berpindah dari satu halaman ke halaman yang lain.

Untuk soalan asal, anda boleh melaksanakan beberapa jenis perisian tengah penghala seperti Nuxt lakukan . Dengan cara ini anda boleh membuat 等待 panggilan HTTP dan hanya kemudian membenarkan 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). setup sendiri 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 menggunakan prefetch (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)

Answer 2

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