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