一、vue 使用 nprogress 添加进度条的效果
- 通过
npm install --save nprogress
命令下载nprogress
工具包 - 导入
nprogress
包,以及对应的js
和css
文件,代码如下:
// 导入 nprogress 包对应的js和css
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
- 在
request
拦截器中,展示进度条,NProgress.start()
,代码如下:
axios.interceptors.request.use(config => {
// 展示进度条
NProgress.start()
// 为请求头对象,添加Token验证的Authorization
config.headers.Authorization = window.sessionStorage.getItem('token')
// 最后必须返回config
return config
})
- 在
response
拦截器中,隐藏进度条,NProgress.done()
,代码如下:
axios.interceptors.response.use(config => {
NProgress.done()
return config
})