当前位置：首页 > VUE

vue实现页面加载进度

2026-01-23 11:42:31VUE

Vue 实现页面加载进度的方法

使用 NProgress 库

安装 NProgress 库：

npm install nprogress

在 Vue 项目中引入并使用：

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

// 在路由守卫中调用
router.beforeEach((to, from, next) => {
  NProgress.start()
  next()
})

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

自定义进度条组件

创建一个全局进度条组件：

<template>
  <div class="progress-bar" :style="{ width: progress + '%' }"></div>
</template>

<script>
export default {
  data() {
    return {
      progress: 0
    }
  },
  methods: {
    start() {
      this.progress = 0
      const interval = setInterval(() => {
        this.progress += 10
        if (this.progress >= 100) {
          clearInterval(interval)
        }
      }, 200)
    },
    finish() {
      this.progress = 100
      setTimeout(() => {
        this.progress = 0
      }, 500)
    }
  }
}
</script>

<style>
.progress-bar {
  height: 3px;
  background-color: #42b983;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  transition: width 0.3s;
}
</style>

使用 Vue Router 的导航守卫

结合路由变化显示加载状态：

const router = new VueRouter({
  routes
})

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

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

监听页面资源加载

通过 window.onload 事件检测页面完全加载：

mounted() {
  window.onload = () => {
    // 页面完全加载后执行的操作
    this.loading = false
  }
}

使用 Axios 拦截器

为 AJAX 请求添加加载状态：

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)
})

每种方法适用于不同场景，NProgress 提供开箱即用的解决方案，自定义组件更灵活，路由守卫适合SPA应用，资源监听适合传统页面，拦截器则适合AJAX密集型应用。

vue实现页面加载进度