vue------vue中使用nprogress进度条的方法

 放在导航守卫中使用：

1、安装
$ npm install --save nprogress 或者
$ yarn add nprogress

//用法
NProgress.start();
NProgress.done();


2、使用
router.js

//导入
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
// 简单配置
NProgress.inc(0.2)
NProgress.configure({ easing: 'ease', speed: 500, showSpinner: false })

router.beforeEach((to, from, next) => {
  NProgress.start()
  next()
})

router.afterEach(() => {
  NProgress.done()
})

或者在路由拦截中使用：

import axios from 'axios';
import router from '@/router'
import store from '@/store'
import qs from 'qs'; // 处理post数据格式 {name:li,age:5} => name=li&age=5

import {
  Message,
  MessageBox
} from 'element-ui'
import nProgress from 'nprogress'; // 请求滚动条
import 'nprogress/nprogress.css'
// 简单配置
NProgress.inc(0.2)
NProgress.configure({ easing: 'ease', speed: 500, showSpinner: false })


let baseURL = process.env.NODE_ENV === '"development"' ? process.env.BASE_URL : 'https://todo.huaan.work'; //  定义基本url
// 定义请求头

axios.defaults.baseURL = baseURL

axios.defaults.headers.post['Content-Type'] = 'application/json;charSet=UTF-8'

axios.defaults.headers.get['Content-Type'] = 'application/json;charSet=UTF-8'

axios.defaults.headers.put['Content-Type'] = 'application/json;charSet=UTF-8'

axios.defaults.headers.delete['Content-Type'] = 'application/json;charSet=UTF-8'

axios.defaults.headers.patch['Content-Type'] = 'application/json;charSet=UTF-8'

// 添加请求拦截器
axios.interceptors.request.use((config) => {
  nProgress.start(); // 开始加载进度条
  //   localStorage.getItem('token')
  if (store.getters.getUserInfo.token) { // 判断是否存在token，如果存在的话，则每个http header都加上token
    config.headers.Authorization = `Bearer ${store.getters.getUserInfo.token}`;
  }
  return config;
}, (error) => {
  return Promise.reject(error);
})

// 添加响应拦截器
axios.interceptors.response.use((response) => {
  const res = response.data
  // Judging status code in interceptor reply returns corresponding processing information 处理状态码
  if (res.status == null) { // 无状态码，停止,并打印结果
    console.warn(res)
    return;
  }
  if (res.status === 20001 || res.status === 70004 || res.status === 70006) {
    MessageBox.confirm(res.msg, '确认登出', {
      confirmButtonText: '重新登录',
      showCancelButton: false,
      type: 'warning'
    }).then(() => {
      /**
       * 如果token不存在或者token失效则返回登录页
       */
      //   localStorage.clear()
      store.dispatch('removeUserInfo').then(() => {
        router.replace('/login')
      })
    })
  }

  // nProgress.done(); // 结束加载进度条
  return response;
}, (error) => {
  console.log('err' + error) // for debug
  Message({
    message: error,
    type: 'error',
    duration: 5 * 1000
  })
  return Promise.reject(error)
})

简单配置项：

（1）百分比：通过设置progress的百分比，调用 .set(n)来控制进度，其中n的取值范围为0-1。

NProgress.set(0.4);
（2）minimum：设置最低百分比

NProgress.configure({minimum:0.3});
（3）ease：调整动画设置，ease可传递CSS3缓冲动画字符串（如ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier）。speed为动画速度（单位ms）。

NProgress.configure({ease:'ease',speed:500});
（4）showSpinner：进度环显示隐藏

NProgress.configure({showSpinner: false});