javascript - Vuepress | Possible to async fetch data before route render?

Question

I am using VuePress for a documentation website. Currently I have the a Vue component inside a Markdown file. Subsequently, this component can either fetch data from a remote source or require a local json file. Insofar, the component halts render until the data is resolved, but the page itself still renders before this data is resolved and in turn shows blank component (or rather a loading state) until the component has all its data. Keep in mind I don't want a loading state, i want to prevent render of the entire page until ready.

Is it possible to hold up the route change/entire page render until the data is finalized?

Note: async/await in the lifecycle hooks don't work. My takeaway from this is that the issue is probably that the because the component is a child of the markdown file the component lifecycles are restricted to just that - the component.

Note: Even asking this question I feel like its impossible because of the above note, however, VuePress renders other components like Layout, Navigation and Sidebar without any loading state, so why can't other components?

Note: On route change and return to that same route the data does not refresh, this is pretty ideal since the data was already loaded. This is the type of page load I am looking for.

question from:https://stackoverflow.com/questions/65946457/vuepress-possible-to-async-fetch-data-before-route-render

Answer 1

Waitting for answers