vue单页应用里面用到了异步路由出现刷新页面空白的问题

Question

设置完异步路由之后，在页面刷新的时候会出现运用到异步路由的组件出现延迟加载的情况，用户体验非常不好，有什么解决办法
][1]

补充说明：这个页面的头部和底部是公共部分，切换导航的时候头部和底部不会改变
layout.vue文件代码如下：

  <div class="layout">

    <Home_Navigation></Home_Navigation>

    <MainComponent></MainComponent>

    <Home_Footer></Home_Footer>

  </div>

MainComponent.vue组件代码如下：

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

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

 </div>

Answer 1

你可以试着在异步请求完成后使用 router.addRoutes 添加新的路由表，看看行不行

Answer 2

取了个巧，运用的beforeResolve的钩子，在调用beforeResolve之前让根组件隐藏，在调用beforeResolve的时候让跟组件显示，就避免了提问中刷新页面出现中间部分延迟显示，导致上下结构拼在一起的尴尬