把大象装进冰箱需要几步

---

1.写一个全局loading的样式组件，我这里使用了LottieAnimation 实现更优雅的切换动画，详情可以参考主页上一篇文章

<template><div v-if="isLoading" class="loading-overlay"><LottieAnimation :animationPath="lottieList[getRandomInt()]" style="width: 40%;height: 50%;" /></div>
</template><script setup lang="ts">
import { ref, defineProps, watch } from 'vue';
import LottieAnimation from './LottieAnimation.vue';
const props = defineProps({isLoading: {type: Boolean,default: true,},
});function getRandomInt(): number {return Math.floor(Math.random() * 2);
}const lottieList = ref(['https://lottie.host/4f0fb5d6-1873-4cfd-a8d5-8387f094d818/WCv6ECocUx.json',"https://lottie.host/a2e813e0-9448-420f-b0af-586eb9aaa738/uuz2oRP47a.json",
])watch(() => props.isLoading, (newValue) => {if (newValue) {document.body.style.overflow = 'hidden';} else {document.body.style.overflow = '';}
});</script><style scoped>
.loading-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgb(255, 255, 255);display: flex;justify-content: center;align-items: center;z-index: 1000;opacity: 1;
}.spinner {border: 4px solid rgba(0, 0, 0, 0.1);border-left-color: #000;border-radius: 50%;width: 40px;height: 40px;animation: spin 1s linear infinite;opacity: 1;
}@keyframes spin {to {transform: rotate(360deg);}
}
</style>

---

2.将组件挂载到全局上

// main.ts
import Loading from "@/components/DIRECTIVES/Loading.vue"
const app = createApp(App);
app.component('Loading', Loading);
app.mount("#app");

---

3.修改路由配置，添加路由守卫

// src/router/index.ts
import { createRouter, createWebHistory } from "vue-router";
import routers from "./router";
import { ref } from "vue";const routes = [routers];
const isLoading = ref(false);
const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes,scrollBehavior() {return { top: 0 };},
});// 添加全局路由守卫
router.beforeEach((to, from, next) => {isLoading.value = true;next();});router.afterEach(() => {setTimeout(() => {isLoading.value = false;}, 2100);
});export { isLoading };
export default router;

---

4.最后在全局routerView上加载loading

<template><div><NavBar /><div class="content"><div v-if="!isFullWidthRoute"><RouterView /><Loading :isLoading="isLoading" /></div><div v-if="isFullWidthRoute"><RouterView name="fullWidth" /></div></div><FooterNva /></div>
</template><script setup lang="ts">
import { computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import NavBar from '@/components/globals/NavBar.vue'
import FooterNva from '@/components/globals/FooterNva.vue'
import { isLoading } from '@/router/index';
const route = useRoute()
const fullWidthRoutes = ['robot']
const isFullWidthRoute = computed(() => fullWidthRoutes.includes(route.name as string))
onMounted(() => {console.log('isFullWidthRoute(是否触发100%窗口):', isFullWidthRoute.value);})
</script>

---

至此大象就装进去了