NProgress进度条

vue项目中使用的一个进度条插件。

安装

使用第三方插件NProgress，添加页面顶部进度条。

使用npm下载：

npm install --save nprogress

//main.js中进行如下配置：
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

使用

NProgress.start();//开始
NProgress.done();//结束

案例

下边的例子中，在拦截器中开启、关闭第三方进度条插件NProgress，给丰富页面效果。在发起axios（Ajax）请求时，请求拦截器中开启，响应拦截器中结束。

// request（请求）拦截器
// 请求在到达服务器之前，先会调用use中的这个回调函数
axios.interceptors.request.use(config => {
  NProgress.start();//进度条
  return config;//在最后必须 return config
})
// response（响应）拦截器中,  隐藏进度条NProgress.done()
axios.interceptors.response.use(config => {
  NProgress.done();
  return config;
})

扩展：

在发起Ajax请求时往config中添加一个变量，可用于判断是否显示进度条动画。详情见Axios笔记。