前端开发之Nprogress页面虚假进度条

前言

git讲解文档
Nprogress是一个比较简单的页面加载用进度条（其实也可以用作接口加载进度，或者其它处理加载进度样式）。简单而代码又少。实用度比较高。
一开始进入处理方法的时候，它就启动loading的效果，一旦捕获到这个方法结束的时候，那么就释放它，为了防止比较生硬，那么释放后也会有一个进度条缓慢加载完成100%。
比较常用的场景beforeEach中使用start 在afterEach中使用done

效果图

vue中简单案例

1、安装组件

 npm install --save nprogerss

2、vue文件

//引入文件
import VabProgress from 'nprogress'
import 'nprogress/nprogress.css'

export function setup () {
	//配置参数
	VabProgress.configure({
	    easing: 'ease',
	    speed: 500,
	    trickleSpeed: 200,
	    showSpinner: false
	})
	//显示
	VabProgress.start()
	//结束
	VabProgress.done()
}