88 lines
2.0 KiB
Vue
88 lines
2.0 KiB
Vue
|
<template>
|
||
|
|
<!-- 全局进度条组件 -->
|
||
|
|
<ProgressBar />
|
||
|
|
<router-view v-if="isReady"></router-view>
|
||
|
|
<div v-else class="loading-container">
|
||
|
|
<div class="loading-spinner"></div>
|
||
|
|
<div class="loading-text">路由加载中...</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref, onMounted, nextTick } from 'vue'
|
||
|
|
import { useUserStore } from '@/stores/modules/user'
|
||
|
|
import { useRouteStore } from '@/stores/modules/router'
|
||
|
|
import { addDynamicRoutes } from '@/router'
|
||
|
|
import { useRouter, useRoute } from 'vue-router'
|
||
|
|
import ProgressBar from '@/components/ProgressBar.vue'
|
||
|
|
|
||
|
|
const isReady = ref(false)
|
||
|
|
const userStore = useUserStore()
|
||
|
|
const routerStore = useRouteStore()
|
||
|
|
const router = useRouter()
|
||
|
|
|
||
|
|
|
||
|
|
onMounted(async () => {
|
||
|
|
console.log('开始初始化应用...')
|
||
|
|
|
||
|
|
// 初始化用户信息
|
||
|
|
await userStore.init()
|
||
|
|
|
||
|
|
// 确保路由已加载
|
||
|
|
// if (routerStore.defaultRoutes.length === 0) {
|
||
|
|
// routerStore.initDefaultRoutes()
|
||
|
|
// // 强制加载动态路由
|
||
|
|
// addDynamicRoutes()
|
||
|
|
// }
|
||
|
|
|
||
|
|
// 等待一些时间确保路由已完全加载
|
||
|
|
await new Promise((resolve) => setTimeout(resolve, 500))
|
||
|
|
|
||
|
|
// 检查路由表是否已加载
|
||
|
|
console.log(
|
||
|
|
'当前路由表：',
|
||
|
|
router.getRoutes().map((r) => r.path)
|
||
|
|
)
|
||
|
|
|
||
|
|
// 标记应用已准备好
|
||
|
|
await nextTick()
|
||
|
|
isReady.value = true
|
||
|
|
console.log('应用初始化完成，准备渲染路由视图')
|
||
|
|
|
||
|
|
// 跳转
|
||
|
|
router.push(router)
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.loading-container {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
height: 100vh;
|
||
|
|
width: 100vw;
|
||
|
|
}
|
||
|
|
|
||
|
|
.loading-spinner {
|
||
|
|
width: 40px;
|
||
|
|
height: 40px;
|
||
|
|
border: 4px solid rgba(0, 0, 0, 0.1);
|
||
|
|
border-radius: 50%;
|
||
|
|
border-top-color: #409eff;
|
||
|
|
animation: spin 1s ease-in-out infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
.loading-text {
|
||
|
|
margin-top: 16px;
|
||
|
|
font-size: 16px;
|
||
|
|
color: #606266;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes spin {
|
||
|
|
to {
|
||
|
|
transform: rotate(360deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|