当前位置：首页 > VUE

vue实现页面加载中

2026-02-21 13:41:18VUE

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 即可，复杂的应用建议使用状态管理或第三方库。

vue实现页面加载中