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>

Single-page-application vue.js

Oct.28,2021

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

Previous: Vue introduces an object through import, assigns the object to data, and then asynchronously modifies the value of the property of the object in data. Vue cannot listen.

Next: How to understand and apply the regular foresight?

I would like to ask that in vue, before getting the data, dom renders the data in advance and causes an error. How can this problem be solved?
Hello, seniors. Recently, I encountered a problem that is difficult to solve when writing vue. It is like this . data is a variable that calls api, and then assigns values to me I have asked other people whether they said that dom had already ...

Front-end javascript single-page-application vue.js

Mar.01,2021