How to display already rendered page after vue router 2 route change?

Question

Vue.js

Hello!

When you click on the router-link, the page (component-page) changes, and then, within a second, the rest of the components begin to load gradually - that is, I clearly see how they begin to be drawn. These look pretty ugly. How can I render in the background, and then show the user a fully rendered page in one frame?

Answer 1

Add a prefetch on asynchronous imports (sometimes (not always) it is advisable to remove them altogether)
component: () => import(/* webpackPrefetch: true */ 'path/to/component')
make sure that data for components is not received in created / mounted, and earlier, for example, it was stored in vuex in advance and / or while data was being received - skeletons or a loading screen with a spinner were displayed.

Answer 2

You can add the whole page to the else block, and put the v-if loader with the boolean flag. And on any condition to change this flag.

<template>
<div v-if="loader">
<span>loading...</span>
</div>
<div v-else>
<!--- тут ваша страница --->
</div>
</template>

And already in the component, change the flag in created, mounted or by timer or nexttick