当前位置：首页 > VUE

vue实现加载

2026-01-13 07:27:36VUE

Vue 实现加载功能的方法

使用 v-if 或 v-show 控制加载状态

在模板中通过 v-if 或 v-show 控制加载动画的显示与隐藏。v-if 会完全移除 DOM 元素，而 v-show 仅通过 CSS 控制显示。

<template>
  <div>
    <div v-if="isLoading" class="loading-spinner">
      <!-- 加载动画内容 -->
    </div>
    <div v-else>
      <!-- 正常内容 -->
    </div>
  </div>
</template>

使用 Vue 的异步组件

通过 defineAsyncComponent 实现组件的懒加载，适用于路由或组件按需加载的场景。

import { defineAsyncComponent } from 'vue';

const AsyncComponent = defineAsyncComponent(() =>
  import('./AsyncComponent.vue')
);

结合 Axios 拦截器实现请求加载

在发送请求时显示加载状态，请求完成后隐藏。通过 Axios 的拦截器统一处理。

axios.interceptors.request.use(config => {
  store.commit('setLoading', true);
  return config;
});

axios.interceptors.response.use(response => {
  store.commit('setLoading', false);
  return response;
}, error => {
  store.commit('setLoading', false);
  return Promise.reject(error);
});

使用第三方库如 vue-loading-overlay

集成现成的加载动画库，快速实现功能。安装后直接使用组件。

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

app.component('loading-overlay', Loading);

通过 Vuex 或 Pinia 管理全局加载状态

在状态管理中定义加载状态，便于跨组件共享和控制。

// Pinia 示例
import { defineStore } from 'pinia';

export const useStore = defineStore('main', {
  state: () => ({
    isLoading: false
  }),
  actions: {
    setLoading(status) {
      this.isLoading = status;
    }
  }
});

结合 CSS 动画实现自定义加载效果

通过 CSS 动画或过渡效果增强视觉体验，灵活适配不同场景。

.loading-spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

以上方法可根据具体需求组合使用，例如全局状态管理结合拦截器实现统一加载控制，或异步组件搭配自定义动画提升用户体验。

vue实现加载