浏览器顶部的进度条：NProgress1.安装 2.引入包对应的JS和CSS 3.用法进度条出现 NProgress.

1.安装（vue）

npm install --save nprogress

2.引入包对应的JS和CSS

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

3.用法

进度条出现
NProgress.start();

进度条消失
NProgress.done();

4.使用

（1）页面跳转时的进度

router.beforeEach((to, from, next) => {
  NProgress.start()
  next()
})

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

（2）发生异步请求的进度

axios.interceptors.request.use(config => {
  NProgress.start()
  // 在最后必须 return config
  return config
})

axios.interceptors.response.use(config => {
  NProgress.done()
  return config
})

5.NProgress配置

showSpinner：进度环显示隐藏

NProgress.configure({showSpinner: false});

ease：调整动画设置，ease可传递CSS3缓冲动画字符串(如ease、linear 等)，speed为动画速度(单位ms)

NProgress.configure({ease:'ease',speed:500});

minimum：最低百分比

NProgress.configure({minimum:0.2});

百分比：通过设置progress的百分比，调用 .set(n)来控制进度，其中n的取值范围为0-1。

NProgress.set(0.4);

6.修改进度条颜色

#nprogress .bar{
  background:red !important;//自定义颜色
}