技術標籤：vuejavascriptaxios

首先安裝nprogress作為執行依賴

接著回到專案的main.js裡，匯入nprogress和樣式檔案：

// 匯入nprogress和對應的樣式檔案
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

nprogress的使用相當簡單：

NProgress.start();
NProgress.done();

問題是什麼時候呼叫這兩個方法？

我們利用axios的請求攔截器和響應攔截器去使用：

// 掛載axios之前配置請求攔截器，配置顯示進度條NProgress.start()
 

axios.interceptors.request.use(config => {
  NProgress.start()
  // 一定要return config
  return config
})

// 配置響應攔截器,隱藏進度條NProgress.done()
axios.interceptors.response.use(config => {
  NProgress.done()
  return config
})

// 掛載axios到Vue的原型物件上，這樣每個vue的元件都可以通過$http直接訪問到axios從而發起ajax請求
Vue.prototype.$http =
 
 axios

這樣就配置好了