Vue给项目添加进度条

前言

  在PC端项目的开发过程中，有时我们需要给项目添加一个进度条来展示界面是否已经完成加载的情况。那么如何才能成功添加进度条呢？

添加方式

  1.引入插件Nprogress

npm install --save nprogress

  2.在main.js中引入对应的包文件

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

  3.展示进度条，我选择的时间是发送request请求的时候展示（因为我的界面使用了created钩子函数去获得后端的数据，也可以写在路由跳转之前展示）

axios.interceptors.request.use(config => {
  NProgress.start()
  return config
})

  3.隐藏进度条，在response拦截器中隐藏（证明已经返回了数据，界面已经加载）

axios.interceptors.response.use(config => {
  NProgress.done()
  return config
})

  4.附上该插件的GitHub地址，里面有使用的详细信息

  https://github.com/rstacruz/nprogress