如何为vue项目添加进度条

使用到的插件为NProgress

  1. 下载NProgress插件(在elementui中直接找到依赖,点击下载依赖)
  2. 在main.js中引入
// 导入NProgress包对应的JS和CSS
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
  1. 并且注册
// 在request拦截器中,展示进度条 NProgress.start()
axios.interceptors.request.use(config => {
  NProgress.start()
  config.headers.Authorization = window.sessionStorage.getItem('token')
  return config
})
// 在response拦截器中,隐藏进度条NProgress.done()
axios.interceptors.response.use(config => {
  NProgress.done()
  return config
})

你可能感兴趣的:(如何为vue项目添加进度条)