Vue PC端 添加页面加载进度条效果 nprogress

使用 nprogress 包来完成效果

1、下载nprogress 包

npm install nprogress --save nprogress 

2、在request.js 中引用

//导入nprogress加载进度条包即样式
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

// 请求拦截器
service.interceptors.request.use(config => {
  // 请求开始 进度条加载
  NProgress.start()

  if (store.getters.token) {
    // .....
  }
  return config
}, err => {
  return Promise.reject(err)
})

// 响应拦截器
service.interceptors.response.use(response => {
  // 请求结束 进度条关闭
  NProgress.done();

  const { data, message, success } = response.data
  if (success) {
    // ......
}, err => {
    // ....
})

3、调整进度条样式

在 'nprogress/nprogress.css' 中进行设置即可