hookehuyr

refactor(router): 重构路由加载逻辑以优化用户体验

移除Suspense组件,改为在路由守卫中统一管理加载状态
添加路由错误处理确保加载状态正确重置
......@@ -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>
......
......@@ -6,6 +6,7 @@
* @Description: 文件描述
*/
import { createRouter, createWebHashHistory } from 'vue-router'
import { useLoadingStore } from '@/stores/loading.js'
const routes = [
{
......@@ -58,26 +59,61 @@ const router = createRouter({
* 说明:不使用平滑滚动,进入新页面时立即滚动到顶部,确保用户无感知的快速回到初始位置。
*/
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition
}
return { left: 0, top: 0 }
if (savedPosition) {
return savedPosition
}
return { left: 0, top: 0 }
}
})
// 路由守卫
router.beforeEach((to, from, next) => {
// 设置页面标题
if (to.meta.title) {
document.title = to.meta.title
}
// 设置页面标题
if (to.meta.title) {
document.title = to.meta.title
}
// 开启全局loading用于覆盖路由懒加载白屏
/**
* 开启路由级加载指示
* @description 进入任意页面前先展示全局loading,避免异步组件/资源加载期间出现白屏
*/
try {
const loading = useLoadingStore()
loading.start()
} catch (e) {
// 兜底:忽略异常,保证路由流程继续
void e
}
// 这里可以添加权限验证逻辑
next()
// 这里可以添加权限验证逻辑
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
......