这篇文章将为大家详细讲解有关Vue项目中使用nprogress实现一个页面加载进度条功能，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。
nprogress页面加载进度条
前言
很多时候在访问网页的时候我们总是看到页面在加载中，可以却不知道要加载多久，无期限的等待总是让人烦躁不安，所以我们希望能知道网页加载的进度，这样我们就能做到心中有数是否继续等待页面加载。这个功能我们可以依靠nprogress来实现，它是轻量级的进度条组件，使用简便，可以很方便集成到应用中来。
安装nprogress
直接在项目中执行安装命令：npm install --save nprogress
nprogress方法
NProgress.start() // 进度条开始 NProgress.set() // 将进度设置到具体的百分比位置，取值范围是0到1.0 NProgress.inc() // 如果少量增加进度，进度将永远不会得到100% NProgress.done() // 进度条结束消失 NProgress.configure() // 进度条参数配置
全局引入nprogress
在main.js中引入nprogress插件和样式，
import NProgress from ‘nprogress' // nprogress插件 import ‘nprogress/nprogress.css' // nprogress样式
配置nprogress
在NProgress.configure({})中我们可以对nprogress进行适当的配置，showSpinner 为 false（禁用进度环）、trickle 为 false（关闭进度条步进）、trickleRate （每次步进增长多少）、trickleSpeed （步进间隔，单位毫秒ms）、ease（动画方向）、speed （动画速度，单位毫秒ms）、minimum （最小百分比）等等。
NProgress.configure({ showSpinner: false }) //我这里只关闭进度环Vuerouter路由钩子
在添加nprogress之前我们需要先了解Vuerouter的beforeEach与afterEach钩子函数，这是在路由跳转的时候对路由进行一些权限判断或者其他操作时定义的处理函数，Vue.beforeEach是在跳转之前执行，Vue.afterEach是在跳转之后执行判断的。
Vue.beforeEach(function(to,form,next){})函数有三个参数，Vue.afterEach(function(to,form))函数有两个参数：
to:即将进入的路由对象
from:当前导航即将离开的路由对象
next:调用该方法，进入下一个钩子函数，next(false):则中断当前的导航。
在路由中添加nprogress
在main.js中全局钩子函数，在路由跳转前用NProgress.start()标记下进度条开始，在路由跳转后用NProgress.done()标记下结束，这样在路由跳转的时候就可以在页面顶部看到一个progress bar进度条了
import Vue from 'vue'
import App from './App.vue'
import router from '@/router/index.js'
import store from './store'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import '@/assets/icons/index.js'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
Vue.use(Element)
Vue.config.productionTip = false
NProgress.configure({ showSpinner: false })
router.beforeEach((to, from, next) => {
NProgress.start()
next()
})
router.afterEach(() => {
NProgress.done()
})
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')在请求中添加nprogress
如果你希望每次发送请求的时候也出现进度条的话可以在axios封装中的路由拦截中添加nprogress
// 请求拦截器(请求发出前处理一些请求) axios.interceptors.request.use( NProgress.start() }) // 响应拦截器（处理响应数据） axios.interceptors.response.use( NProgress.done() )
为了让结构更滑清晰简洁些，我们重新整理下代码，即然nprogress主要是用在路由跳转上，这里我将nprogress归纳放入router中，切记实例化router之后调用Vuerouter的beforeEach与afterEach钩子函数生效。
import Vue from 'vue'
import Router from 'vue-router'
import routers from './routers'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
NProgress.configure({ showSpinner: false })
Vue.use(Router)
const router = new Router({
mode: 'history',
routes: routers
})
export default router
router.beforeEach((to, from, next) => {
NProgress.start()
next()
})
router.afterEach(() => {
NProgress.done()
})修改nprogress样式
在app.vue中添加如下样式即可修改nprogress样式，记得添加 !important来覆盖原有样式
#nprogress .bar {
background: #66B1FF !important; // 自定义颜色
height: 20px !important; // 自定义高度
}关于Vue项目中使用nprogress实现一个页面加载进度条功能就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
