First of all,beforeRouteUpdateis only triggered when the actual route is updated, but does not go to another component/page like the officialtellshere.

An example of what might trigger a lifecycle hook is

 random hash 

onBeforeRouteLeaveWorks perfectly, as you would expect, when moving from one page to another.

For the original question, you could implement some kind ofrouter middlewarelikeNuxt does. This way youwait forthe HTTP call andonly thenallow actual navigation. So it's almost possible to create a block navigation effect.

I'm not sure how to write it using the Composition API, but I know it works perfectly with the Options API (there are plenty of blog posts available).setupitself runs in it's own life cycle way and I imagine a lot of things are pretty tricky.

TLDR: In my opinion, a good router middleware page wrapper (like layout) is the perfect combination in your case. There you can set up an observer for quite a few pages at the same time.

But everything depends on how you want to organize yourself and structure your code.

---

The skeleton screen gives a faster feel than blocking, but in general you can also useprefetch (also shipped with Nuxt by default) to get some hints and maybe Certain resources are required before loading them. (Other tricks in the same domain to speed up your network requests)

There is a solution - use top level await -https://vuejs.org/api/sfc-script-setup.html#top-level-await

Just wrap the RouterView component in a Suspense component as shown below -https://vuejs.org/guide/built-ins/suspense.html#combining-with-other-components( Don't use unnecessary components)

The only thing to note is that the "loading screen" will be visible on the initial request.

I made a small demo for you so you can try it out -https://github.com/ileue/vue-top-level-await-demo