Meilleur moyen de précharger les données d'itinéraire avant d'accéder à l'itinéraire.

Question

Avant de restituer la page pour un itinéraire donné, je souhaite d'abord obtenir les données nécessaires de manière synchrone. Idéalement, j'aimerais récupérer les données dans le composant de page, mais je ne suis pas opposé à le faire dans le fichier du routeur. J'ai lu et essayé différentes approches, mais une partie du défi vient du fait qu'il existe plusieurs façons de créer des composants et que l'utilisation de certaines fonctionnalités varie.

Dans mon cas j'utilise Composition API et

Answer 1

Tout d'abord, beforeRouteUpdate n'est déclenché que lorsque l'itinéraire réel est mis à jour, mais ne va pas vers un autre composant/page comme le officiel l'a dit ici .

Un exemple de ce qui pourrait déclencher un hook de cycle de vie est

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

onBeforeRouteLeave Fonctionne parfaitement comme on peut s'y attendre lorsque l'on passe d'une page à une autre.

Pour la question d'origine, vous pouvez implémenter une sorte de middleware de routeur comme Nuxt le fait . De cette façon, vous pouvez effectuer des 等待 appels HTTP et seulement alors autoriser la navigation réelle. Il est donc presque possible de créer un effet de navigation en bloc.

Je ne sais pas comment l'écrire à l'aide de l'API Composition, mais je sais que cela fonctionne parfaitement avec l'API Options (de nombreux articles de blog sont disponibles). setup fonctionne lui-même selon son propre cycle de vie, et j'imagine que beaucoup de choses sont assez délicates.

TLDR : À mon avis, un bon middleware de routeur + un wrapper de page (comme la mise en page) est la combinaison parfaite dans votre cas. Là, vous pouvez configurer un observateur pour plusieurs pages en même temps.

Mais tout dépend de la manière dont vous souhaitez vous organiser et structurer votre code.

---

L'écran squelette donne une impression plus rapide que le blocage, mais en général, vous pouvez également utiliser prefetch (également livré avec Nuxt par défaut) pour obtenir des indices et éventuellement charger certaines ressources avant qu'elles ne soient nécessaires. (+ autres astuces dans le même domaine pour accélérer vos requêtes réseau)

Answer 2

Il existe une solution - utilisez l'attente de niveau supérieur - https://vuejs.org/api/sfc-script-setup.html#top-level-await

Enveloppez simplement le composant RouterView dans le composant Suspense comme indiqué ci-dessous - https://vuejs.org/guide/built-ins/suspense.html#combining-with-other-components(N'utilisez pas de composants inutiles)

La seule chose à noter est que "l'écran de chargement" sera visible lors de la demande initiale.

J'ai fait une petite démo pour vous pour que vous puissiez l'essayer - https://github.com/ileue/vue-top-level-await-demo