Rumah > Soal Jawab > teks badan
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
语法构建单文件组件。 Vue Router 文档链接讨论了“导航前获取”,其中我可以访问 beforeRouteEnter
或 beforeRouteUpdate
,但这是使用选项 API 显示的。他们确实有 Composition API 的页面,提到我可以使用 onBeforeRouteUpdate
,但它使用 setup()
函数。我想无论如何我都会尝试使用
:
<script setup> import { onBeforeRouteUpdate } from 'vue-router' onBeforeRouteUpdate(() => { console.log('onBeforeRouteUpdate') }) </script>
但是,这不会执行。我尝试过的最接近的方法是使用 beforeEnter
防护来获取路由器中的数据,并将数据设置到 meta
属性上,然后可以在组件中的路由实例上访问该属性: p>
beforeEnter: (to, from, next) => { fetch('https://pokeapi.co/api/v2/pokemon/ditto') .then(res => res.json()) .then(res => { to.meta.pokemon = res; next(); }); }
但是有了这个,文档中指出, beforeEnter
仅在输入路由时触发。参数更改不会重新触发此问题,这意味着我必须在组件中的路线上设置一个观察程序。我还不如将所有这些逻辑都放在组件本身中。
我似乎找不到一个好的方法来做到这一点,但我可能忽略了一些事情。如果有人有一些指示或建议,我将不胜感激。提前致谢。
P粉5462579132023-11-18 12:39:56
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< /a> (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)
P粉5459565972023-11-18 11:49:37
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