Vue single-page application uses asynchronous routing to refresh the blank space of the page.

after setting up asynchronous routing, there will be delayed loading of components using asynchronous routing when the page is refreshed. The user experience is very bad. Is there any solution
![] [1]

Note: the header and bottom of this page are public parts, and the header and bottom will not change when switching navigation
layout.vue file code is as follows:


  <div class="layout">

    <Home_Navigation></Home_Navigation>

    <MainComponent></MainComponent>

    <Home_Footer></Home_Footer>

  </div>

the MainComponent.vue component code is as follows:

 <div class="layout-content-main">

      <router-view name="mainRouter"></router-view>

 </div>

you can try to add a new routing table using router.addRoutes after the asynchronous request is completed, and see if the row


takes the trick of using the hook of beforeResolve to hide the root component before calling beforeResolve and show it with the component when calling beforeResolve, thus avoiding the embarrassment of delayed display of the middle part of the refresh page in the question, resulting in the upper and lower structures being put together

.
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e97c7e-1687.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e97c7e-1687.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?