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});