72 lines
1.5 KiB
Vue
72 lines
1.5 KiB
Vue
<template>
|
||
<div id="app">
|
||
<template v-if="pageLoaded">
|
||
<template v-if="!route.meta.screen">
|
||
<Index></Index>
|
||
</template>
|
||
<router-view v-else></router-view>
|
||
</template>
|
||
<!-- 路由加载中的指示器，避免白屏 -->
|
||
<div v-else class="loading-container">
|
||
<div class="loading-spinner"></div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
import { useRoute, useRouter } from 'vue-router'
|
||
import Index from "./views/index.vue";
|
||
import { onMounted } from 'vue';
|
||
|
||
const route = useRoute()
|
||
const router = useRouter()
|
||
const pageLoaded = ref(false)
|
||
|
||
onMounted(async () => {
|
||
try {
|
||
// 等待路由完全准备好，确保 route.meta 已正确加载
|
||
// 这样可以避免大组件懒加载时的竞态条件问题
|
||
await router.isReady()
|
||
} catch (error) {
|
||
// 即使路由加载失败，也要显示页面，避免永久白屏
|
||
console.error('路由初始化失败:', error)
|
||
} finally {
|
||
// 无论成功或失败，都设置 pageLoaded 为 true
|
||
pageLoaded.value = true
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
#app {
|
||
width: 100%;
|
||
height: 100vh;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.loading-container {
|
||
width: 100%;
|
||
height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: #0a0e27;
|
||
}
|
||
|
||
.loading-spinner {
|
||
width: 50px;
|
||
height: 50px;
|
||
border: 4px solid rgba(255, 255, 255, 0.1);
|
||
border-top-color: #409eff;
|
||
border-radius: 50%;
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
|
||
@keyframes spin {
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
</style>
|