1.安装NProgress
npm install --save nprogress
2.引入
// 引入NProgress import NProgress from 'nprogress' // 引入nprogress样式文件 import'nprogress/nprogress.css'
3.使用
1.发送请求时展示进度条（写在main.js文件达到全局的效果）
//设置request拦截器,在发起请求的时,展示进度条 axios.interceptors.request.use(config => { // 展示进度条 NProgress.start() }) // 设置response拦截器，在请求结束时,关闭进度条 axios.interceptors.response.use(config => { // 关闭进度条 NProgress.done() })
2.路由跳转时展示进度条（写在main.js文件达到全局的效果）
router.beforeEach((to, from, next) => { // 开启进度条 NProgress.start() next() }) router.afterEach((to, from, next) => { // 关闭进度条 NProgress.done() })
3.Nprogress的其他方法
可以通过调用 .set(n)来设置进度，n是0-1的数字。
NProgress.set(0.0); NProgress.set(0.4); NProgress.set(1.0);
可以使用inc()随机增长进度条，注意，这个方法永远不会让进度条达到100%。
NProgress.inc();
