Hooke / stdj_h5

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
d04059ae 1 parent d16e0afa

feat(路由): 添加路由懒加载时的加载状态占位 

使用Suspense组件包裹路由视图，在懒加载时显示加载动画，避免白屏现象
Inline Side-by-side
Showing 1 changed file with 13 additions and 2 deletions
...@@ -7,8 +7,19 @@ ...@@ -7,8 +7,19 @@
7 --> 7 -->
8 <template> 8 <template>
9 <div id="app"> 9 <div id="app">
10 - <router-view /> 10 + <!-- 路由懒加载时的占位，避免白屏 -->
11 - <!-- 全局loading蒙版 --> 11 + <router-view v-slot="{ Component }">
12 + <Suspense>
13 + <component :is="Component" />
14 + <template #fallback>
15 + <div class="global-loading-overlay">
16 + <van-loading type="spinner" size="24px" color="#FFF" text-color="#FFF">加载中...</van-loading>
17 + </div>
18 + </template>
19 + </Suspense>
20 + </router-view>
21 +
22 + <!-- 全局loading蒙版（接口进行中显示） -->
12 <div v-if="is_loading" class="global-loading-overlay"> 23 <div v-if="is_loading" class="global-loading-overlay">
13 <van-loading type="spinner" size="24px" color="#FFF" text-color="#FFF">加载中...</van-loading> 24 <van-loading type="spinner" size="24px" color="#FFF" text-color="#FFF">加载中...</van-loading>
14 </div> 25 </div>
......