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

下面详细讲解在 Vue 中实现 NProgress 页面加载进度条的方法。

什么是 NProgress？

NProgress 是一个轻量级的页面加载进度条库，通常用于在页面加载的过程中展示加载的进度。

安装 NProgress

我们可以使用 npm/yarn 安装 NProgress。

npm install nprogress
# 或
yarn add nprogress

在 Vue 中使用 NProgress

第一步：在 main.js 中引入 NProgress

我们需要在 main.js 中引入 NProgress 库和其样式文件。

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
Vue.prototype.NProgress = NProgress

第二步：使用 Vue 的路由导航钩子设置进度条

我们可以在使用 Vue Router 时，使用 Vue 的全局路由钩子来监听路由变化，从而开启进度条。

import router from './router'
router.beforeEach((to, from, next) => {
  // 开始进度条
  NProgress.start()
  next()
})
router.afterEach(() => {
  // 结束进度条
  NProgress.done()
})

在这段代码中，beforeEach 钩子会在每次路由变化时触发，这里我们使用 NProgress.start() 开启进度条。afterEach 钩子会在路由变化结束时触发，使用 NProgress.done() 结束进度条。

示例一：通过按钮控制进度条

我们可以通过一个按钮来控制进度条的变化。假设我们在组件中有一个按钮，当点击按钮时需要展示进度条。

<template>
  <button @click="startProgress">开始进度条</button>
</template>

<script>
export default {
  methods: {
    startProgress () {
      this.NProgress.start()
      setTimeout(() => {
        this.NProgress.done()
      }, 2000)
    }
  }
}
</script>

在这个示例中，我们在按钮的点击事件中使用了 NProgress.start() 开启进度条。然后，我们模拟了一个异步操作，两秒后使用 NProgress.done() 结束进度条。

示例二：在请求数据时，展示进度条

在实际项目中，我们需要展示进度条来展示请求数据的加载过程。下面是一个使用 Axios 进行数据请求的示例。

import axios from 'axios'

export default {
  methods: {
    fetchData () {
      this.NProgress.start()
      axios.get('/api/data')
        .then(response => {
          // 获取数据后的处理
          this.dataList = response.data
        })
        .catch(error => {
          // 处理请求错误
        })
        .finally(() => {
          this.NProgress.done()
        })
    }
  }
}

在这个示例中，我们使用了 Axios 库进行数据请求，使用了 Promise 的 then() 和 catch() 方法进行请求成功和失败时的操作。我们在开始请求数据时，使用了 NProgress.start() 开启进度条，请求结束后使用 NProgress.done() 结束进度条。

总结

以上就是使用 Vue 和 NProgress 实现页面进度条的方法。生动的示例可以帮助我们更好的理解和运用代码。在实际项目中，我们可以根据需求结合不同的 NProgress 方法，来实现适合我们的页面进度条效果。