当前位置：首页 > VUE

vue实现页面加载

2026-01-17 11:05:26VUE

Vue 实现页面加载的方法

在 Vue 中实现页面加载效果可以通过多种方式完成，以下是几种常见的方法：

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

通过绑定一个布尔值来控制加载动画的显示与隐藏。当数据加载完成时，切换布尔值状态。

<template>
  <div>
    <div v-if="isLoading" class="loading-spinner">加载中...</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>

使用异步组件和 Suspense

Vue 3 提供了 Suspense 组件，可以更好地处理异步加载状态。

<template>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <div class="loading">加载中...</div>
    </template>
  </Suspense>
</template>

<script>
import { defineAsyncComponent } from 'vue'

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

export default {
  components: {
    AsyncComponent
  }
}
</script>

使用路由导航守卫

在 Vue Router 中可以通过全局前置守卫实现页面切换时的加载效果。

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [...]
})

router.beforeEach((to, from, next) => {
  // 显示加载动画
  store.commit('setLoading', true)
  next()
})

router.afterEach(() => {
  // 隐藏加载动画
  setTimeout(() => {
    store.commit('setLoading', false)
  }, 500)
})

使用第三方库

可以使用专门的加载指示器库如 nprogress 来实现顶部进度条效果。

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

router.beforeEach((to, from, next) => {
  NProgress.start()
  next()
})

router.afterEach(() => {
  NProgress.done()
})

自定义加载组件

创建一个可复用的加载组件，通过 props 控制显示状态。

<!-- Loading.vue -->
<template>
  <div v-if="show" class="loading-overlay">
    <div class="loading-content">
      <div class="spinner"></div>
      <p>{{ message }}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    show: Boolean,
    message: {
      type: String,
      default: '加载中...'
    }
  }
}
</script>