vue在项目中添加进度条

最新推荐文章于 2024-05-23 18:55:14 发布

前端技术负责人

最新推荐文章于 2024-05-23 18:55:14 发布

阅读量1k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43837268/article/details/107309237

版权

vue 专栏收录该内容

192 篇文章 4 订阅

订阅专栏

1.下载依赖

 cnpm i nprogress --save

2.main.js中的请求和响应拦截器中使用

// 导入NProgress包对应的JS和CSS
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

// 配置请求的根路径
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1'
// 在request拦截器中，展示进度条 NProgress.start()
axios.interceptors.request.use(config => {
  // console.log(config)
  NProgress.start()
  config.headers.Authorization = window.sessionStorage.getItem('token')
  return config
})
// 在response拦截器中，隐藏进度条 NProgress.done()
axios.interceptors.response.use(config => {
  NProgress.done()
  return config
})