vue中使用nprogress优化导航条和请求数据的时候进行加载中显示

以下内容仅供学习使用

1. 先进行安装
   npm install --save nprogress
   或者
   yarn add nprogress
2. 在你封装的request.js中使用

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

3. 在axios.interceptors.request.use(config => {},请求开始的时候使用
   NProgress.start() //启动
   以下是自己当前例子使用到的代码

let loadingInstance = null
axios.interceptors.request.use(config => {
  NProgress.start() //启动
  // 显示loading状态
  loadingInstance = Loading.service({
    text: '数据加载中...',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)', // 背景颜色
    duration: 1000, // 设置loading显示时间，单位为毫秒
    delay: 500 // 延迟500ms显示
  })
  //为请求头对象，添加token验证的Authorization字段
  config.headers.Authorization = window.sessionStorage.getItem("token")
  return config
}, error => {
  // 隐藏loading状态
  loadingInstance.close()
  return Promise.reject(error)
}),

4. 在 axios.interceptors.response.use(response => {}中使用
   NProgress.done() //关闭

  axios.interceptors.response.use(response => {
    // 隐藏loading状态
    loadingInstance.close()
    NProgress.done()  //关闭
    return response
  }, error => {
    // 隐藏loading状态
    loadingInstance.close()
    return Promise.reject(error)
  })

5. 它默认显示为蓝色进度条，如果你想自定义进度条颜色，可在全局css中或在app.vue下写入自己自定义的css样式；

<style>
// 自定义进度条颜色
 #nprogress .bar {
     background: #F811B2 !important; //自定义颜色
  }
</style>

6. 效果图，刷新之后就会出现蓝条啦！

7. 效果图，加载数据