当前位置：首页 > VUE

vue实现loading页面

2026-03-29 01:45:19VUE

实现Loading页面的方法

在Vue中实现Loading页面可以通过多种方式完成，以下列举几种常见的方法：

使用v-if或v-show指令控制显示

在模板中添加Loading组件或元素，通过数据绑定控制其显示与隐藏：

<template>
  <div>
    <div v-if="isLoading" class="loading-overlay">
      <div class="loading-spinner"></div>
    </div>
    <main-content v-else />
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: true
    }
  },
  mounted() {
    setTimeout(() => {
      this.isLoading = false
    }, 2000)
  }
}
</script>

<style>
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.8);
  display: flex;
  justify-content: center;
  align-items: center;
}
.loading-spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

使用路由导航守卫

在Vue Router中实现全局Loading效果：

// router.js
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [...]
})

router.beforeEach((to, from, next) => {
  store.commit('setLoading', true)
  next()
})

router.afterEach(() => {
  setTimeout(() => {
    store.commit('setLoading', false)
  }, 500)
})

使用第三方库

安装专门的Loading库如vue-loading-overlay：

npm install vue-loading-overlay

在组件中使用：

import Loading from 'vue-loading-overlay'
import 'vue-loading-overlay/dist/vue-loading.css'

export default {
  components: {
    Loading
  },
  data() {
    return {
      isLoading: false
    }
  },
  methods: {
    showLoading() {
      this.isLoading = true
      // 执行异步操作
      setTimeout(() => {
        this.isLoading = false
      }, 2000)
    }
  }
}

高级实现技巧

全局Loading状态管理

使用Vuex管理全局Loading状态：

// store.js
export default new Vuex.Store({
  state: {
    isLoading: false
  },
  mutations: {
    setLoading(state, status) {
      state.isLoading = status
    }
  }
})

// App.vue
<template>
  <div id="app">
    <loading-overlay v-if="$store.state.isLoading" />
    <router-view />
  </div>
</template>

异步组件Loading

配合Vue的异步组件使用：

vue实现loading页面

const AsyncComponent = () => ({
  component: import('./MyComponent.vue'),
  loading: LoadingComponent,
  error: ErrorComponent,
  delay: 200,
  timeout: 3000
})