vue实现页面加载中
Vue 实现页面加载中的方法
使用 v-if 和加载状态变量
在 Vue 组件中定义一个布尔类型的加载状态变量，通过 v-if 控制加载中的显示与隐藏。
<template>
<div>
<div v-if="isLoading">加载中...</div>
<div v-else>页面内容</div>
</div>
</template>
<script>
export default {
data() {
return {
isLoading: true
}
},
mounted() {
this.fetchData()
},
methods: {
fetchData() {
setTimeout(() => {
this.isLoading = false
}, 2000)
}
}
}
</script>使用 Vue 过渡动画
通过 Vue 的过渡组件为加载状态添加动画效果，提升用户体验。
<template>
<div>
<transition name="fade">
<div v-if="isLoading" class="loading-spinner"></div>
</transition>
<div v-show="!isLoading">页面内容</div>
</div>
</template>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
.loading-spinner {
/* 加载动画样式 */
}
</style>使用第三方库
可以集成第三方加载指示器库如 vue-loading-overlay 或 element-ui 的加载组件。
安装 vue-loading-overlay:
npm install vue-loading-overlay使用示例:
<template>
<div>
<loading :active.sync="isLoading" :can-cancel="false"></loading>
<div v-show="!isLoading">页面内容</div>
</div>
</template>
<script>
import Loading from 'vue-loading-overlay'
import 'vue-loading-overlay/dist/vue-loading.css'
export default {
components: {
Loading
},
data() {
return {
isLoading: true
}
},
mounted() {
setTimeout(() => {
this.isLoading = false
}, 2000)
}
}
</script>全局加载状态管理
对于大型应用，可以使用 Vuex 管理全局加载状态，在多个组件间共享加载状态。
// store.js
export default new Vuex.Store({
state: {
isLoading: false
},
mutations: {
setLoading(state, status) {
state.isLoading = status
}
}
})
// 组件中使用
<template>
<div>
<div v-if="$store.state.isLoading">加载中...</div>
<div v-else>页面内容</div>
</div>
</template>
<script>
export default {
mounted() {
this.$store.commit('setLoading', true)
setTimeout(() => {
this.$store.commit('setLoading', false)
}, 2000)
}
}
</script>路由导航守卫
在 Vue Router 中使用导航守卫实现页面切换时的加载效果。
// router.js
router.beforeEach((to, from, next) => {
store.commit('setLoading', true)
next()
})
router.afterEach(() => {
setTimeout(() => {
store.commit('setLoading', false)
}, 500)
})每种方法适用于不同场景，可以根据项目需求选择合适的实现方式。简单的页面级加载使用 v-if 即可，复杂的应用建议使用状态管理或第三方库。
