Vue + ElementUI的电商管理系统实例17 顶部进度条效果
2023-09-27 14:24:39 时间
通过 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 })
此时在打开我们的项目,点击跳转页面的时候,会发现顶部有一闪而过的进度条。
相关文章
- Vue实例的生命周期created和mounted的区别
- 精品微信小程序学生公寓生活管理系统+后台管理系统|前后分离VUE
- vue获取子组件的实例$el、$attrs和inheritAttrs的使用
- vue-router钩子beforeRouteEnter函数获取到this实例
- Vue学习(一):Vue实例
- Vue 简单实例 地址选配9 - 确认地址 - 删除地址
- Vue 简单实例 购物车3 - 删除商品
- Vue + ElementUI的电商管理系统实例31 项目上线-使用pm2管理应用
- Vue + ElementUI的电商管理系统实例30 项目上线-配置https服务
- Vue + ElementUI的电商管理系统实例29 项目上线-开启gzip配置
- Vue + ElementUI的电商管理系统实例27 项目优化-实现路由懒加载
- Vue + ElementUI的电商管理系统实例13 商品列表
- Vue + ElementUI的电商管理系统实例18 解决serve命令中的ESLint语法错误
- Vue + ElementUI的电商管理系统实例09 分配角色权限
- Vue + ElementUI的电商管理系统实例08 角色列表
- Vue + ElementUI的电商管理系统实例07 权限列表
- Vue + ElementUI的电商管理系统实例04 添加用户
- vue 自定义指令(clickoutside.js)
- Vue+ElementUI: 手把手教你做一个audio组件
- Vue中的Ajax①(配置代理)
- vue系列:在js文件中使用vue实例和store实例
- 前端vue倒计时组件【模块化开发】
- 分享7 个VUE项目用得上的JavaScript库
- vue实例方法
- Vue 2.0 起步 (3) 数据流 vuex 和 LocalStorage 实例 - 微信公众号 RSS
- vue.js视频教程,vue.js视频教程下载