vue进度条插件vue-nprogress

我们在vue项目开发中经常会遇到的需求是，在跳转或者请求接口时要求有一个加载的进度条，现在我们介绍的是vue其中的一个进度条插件vue-nprogress

安装

$ npm install nprogress --save 

使用

在main.js中引入依赖

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

使用场景：

如果想ajax请求有progress，加载vue-resource的interceptors中：

Vue.http.interceptors.push((request, next) => {
  NProgress.start();

  next((response)=>{
    NProgress.done();
  });
});

如果想路由跳转有progress，加在vue-router的beforeEach和afterEach中：

router.beforeEach(transition => {
  NProgress.start();
});

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