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
})

此时在打开我们的项目，点击跳转页面的时候，会发现顶部有一闪而过的进度条。