放在導航守衛中使用:
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});