Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Hooke
/
stdj_h5
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Graphs
Network
Create a new issue
Commits
Issue Boards
Authored by
hookehuyr
2025-11-04 21:39:29 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
9ada9f2766615a6d0c5369a131c2bd072212ad2b
9ada9f27
1 parent
d04059ae
refactor(router): 重构路由加载逻辑以优化用户体验
移除Suspense组件,改为在路由守卫中统一管理加载状态 添加路由错误处理确保加载状态正确重置
Show whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
40 additions
and
15 deletions
src/App.vue
src/router/index.js
src/App.vue
View file @
9ada9f2
...
...
@@ -7,19 +7,8 @@
-->
<template>
<div id="app">
<!-- 路由懒加载时的占位,避免白屏 -->
<router-view v-slot="{ Component }">
<Suspense>
<component :is="Component" />
<template #fallback>
<div class="global-loading-overlay">
<van-loading type="spinner" size="24px" color="#FFF" text-color="#FFF">加载中...</van-loading>
</div>
</template>
</Suspense>
</router-view>
<!-- 全局loading蒙版(接口进行中显示) -->
<router-view />
<!-- 全局loading蒙版 -->
<div v-if="is_loading" class="global-loading-overlay">
<van-loading type="spinner" size="24px" color="#FFF" text-color="#FFF">加载中...</van-loading>
</div>
...
...
src/router/index.js
View file @
9ada9f2
...
...
@@ -6,6 +6,7 @@
* @Description: 文件描述
*/
import
{
createRouter
,
createWebHashHistory
}
from
'vue-router'
import
{
useLoadingStore
}
from
'@/stores/loading.js'
const
routes
=
[
{
...
...
@@ -72,12 +73,47 @@ router.beforeEach((to, from, next) => {
document
.
title
=
to
.
meta
.
title
}
// 开启全局loading用于覆盖路由懒加载白屏
/**
* 开启路由级加载指示
* @description 进入任意页面前先展示全局loading,避免异步组件/资源加载期间出现白屏
*/
try
{
const
loading
=
useLoadingStore
()
loading
.
start
()
}
catch
(
e
)
{
// 兜底:忽略异常,保证路由流程继续
void
e
}
// 这里可以添加权限验证逻辑
next
()
})
router
.
afterEach
(()
=>
{
// 路由跳转后的逻辑
// 路由解析完成(异步组件与守卫均已完成)后关闭loading
/**
* 关闭路由级加载指示
* @description 在组件解析完成后关闭一次全局loading,剩余由接口加载计数继续控制
*/
router
.
beforeResolve
(()
=>
{
try
{
const
loading
=
useLoadingStore
()
loading
.
end
()
}
catch
(
e
)
{
// 兜底:忽略异常,保证路由流程继续
void
e
}
})
// 路由错误时重置loading,避免蒙版残留
router
.
onError
(()
=>
{
try
{
const
loading
=
useLoadingStore
()
loading
.
reset
()
}
catch
(
e
)
{
// 兜底:忽略异常,保证路由流程继续
void
e
}
})
export
default
router
...
...
Please
register
or
login
to post a comment