vueプログレスバープラグインvue-nprogress

vueプロジェクトの開発でよく遭遇する要件は、インターフェースをジャンプまたはリクエストするときにロードプログレスバーが必要であるということです。ここで、プログレスバープラグインvue-nprogressを導入します

インストールする

$ npm install nprogress-保存 

使用する

main.jsに依存関係を導入する

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

使用シナリオ：

ajaxリクエストの進行状況が必要な場合は、vue-resourceのインターセプターをロードします。

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

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

ルーティングを進行させたい場合は、それをvue-routerのbeforeEachおよびafterEachに追加します。

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

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