nprogress进度条vue项目实现步骤

1.安装

vue-ui界面： 运行依赖---nprogress

yarn add nprogress

npm i nprogress -S

2.ajax请求拦截器实现

//导入进度条插件
import NProgress from 'nprogress'
//导入进度条样式
import 'nprogress/nprogress.css'
.....
//请求在到达服务器之前，先会调用use中的这个回调函数来添加请求头信息
axios.interceptors.request.use(config => {
  //当进入request拦截器，表示发送了请求，我们就开启进度条
  NProgress.start()
  //为请求头对象，添加token验证的Authorization字段
  config.headers.Authorization = window.sessionStorage.getItem("token")
  //必须返回config
  return config
})
//在response拦截器中，隐藏进度条
axios.interceptors.response.use(config =>{
  //当进入response拦截器，表示请求已经结束，我们就结束进度条
  NProgress.done()
  return config
})

3.全局路由守卫实现

//导入nprogress插件
import Nprogress from 'nprogress'
import 'nprogress/nprogress.css'

// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
  Nprogress.start()
})
router.afterEach((to,from) => {
  Nprogress.done()
})

4.建议

推荐在发送请求使用，因为全局路由实现可能路由加载完成了，页面还没加载好的情况