基于Vuejs的进度条插件——NProgress

NProgress——当项目中有些页面请求内容较多，响应时间较长时，为了让用户清晰看到请求进度，避免长时间等待导致体验不佳而开发的一款轻量级插件。

安装

NPM

npm install --save nprogress

NProgress的用法

调用 start()或者done()来控制进度条开始或者结束。

nprogress.start()
nprogress.done()

调用inc()随机增长进度条，注意，这个方法永远不会让进度条达到100%。

nprogress.inc()

调用 .set(n)来设置进度，n是0-1的数字。

nprogress.set(0.1)

调用configure()进行参数设置

nprogress.configure({
	easing: 'ease',  // 动画方式    
	speed: 200,  // 递增进度条的速度,默认200
	trickleSpeed: 200, // 自动递增间隔    
	trickle: true //开启关闭自动递增行为
	showSpinner: true //开启关闭进度条
})

项目中的运用

1. 全局引用nprogress, 在main.js中引入npmrogress

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

2. nprogress参数设置

nprogress.config({ showSpinner: false }) // 默认关闭进度条

3. 对路由钩子进行设置

// 路由进入前
router.beforeEach((to, from, next) => {
	nprogress.start() // 每次切换页面调用滚动条
	next()
})
router.afterEach(() => {
	nprogress.done() // 路由进入后关闭进度条
})

4. 修改nprogress默认样式

在app.vue中添加样式修改nprogress默认样式，记得添加 !important来覆盖原有样式

#nprogress .bar {
	background: #66B1FF !important; // 自定义颜色
	height: 20px !important; // 自定义高度
}

好记性不如烂笔头，提升自己的同时希望也能帮到你哟！

参考：https://www.toutiao.com/i6718992880599302659/?group_id=6718992880599302659