通过 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 })
此时在打开我们的项目，点击跳转页面的时候，会发现顶部有一闪而过的进度条。
