Vue + ElementUI的電商管理系統實例17 頂部進度條效果

通過 nprogress 第三方的包

打開可視化工具里的依賴，點擊安裝依賴-運行依賴，搜索 nprogress ，進行安裝。

然后導入對應的包，打開main.js文件，我們可以看到，通過 axios 發起了ajax請求，只要發起了請求，就會觸發 request 攔截器。當請求響應完畢就會調用 response 攔截器。

這里我們就可以基於攔截器來實現展示進度條和隱藏進度條的效果。如果觸發 request 攔截器了，就證明我們發起了網絡請求，那么就展示進度條，如果觸發了 response 攔截器，就證明響應成功了，然后隱藏進度條。

在main.js中導入包：

// 導入 Nprogress 包對應的js和css
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

// 在 request 攔截器中，展示進度條 NProgress.start();
// axios請求攔截
axios.interceptors.request.use(config => {
  // console.log(config)
  NProgress.start()
  // 為請求頭對象，添加token驗證的Authorization字段
  config.headers.Authorization = window.sessionStorage.getItem('token')
  // 最后必須return config
  return config
})
// 在 response 攔截器中，隱藏進度條 NProgress.done();
axios.interceptors.response.use(config => {
  NProgress.done()
  return config
})

此時在打開我們的項目，點擊跳轉頁面的時候，會發現頂部有一閃而過的進度條。