NProgress是頁(yè)面跳轉(zhuǎn)是出現(xiàn)在瀏覽器頂部的進(jìn)度條
官網(wǎng)：http://ricostacruz.com/nprogress/
github：https://github.com/rstacruz/nprogress
效果：
image.png
1. 安裝
npm install --save nprogress
// 或者
yarn add nprogress
//用法
NProgress.start();
NProgress.done();
2. 使用
入口文件,main.js引入 nprogress
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
import NProgress from 'nprogress' // 引入nprogress插件
import 'nprogress/nprogress.css' // 這個(gè)nprogress樣式必須引入
寫在axios的請(qǐng)求攔截器和響應(yīng)攔截器里论泛，每次只要觸發(fā)axios請(qǐng)求就加載進(jìn)度條
// axios請(qǐng)求攔截器
axios.interceptors.request.use(
config => {
NProgress.start() // 設(shè)置加載進(jìn)度條(開(kāi)始..)
return config
},
error => {
return Promise.reject(error)
}
)
// axios響應(yīng)攔截器
axios.interceptors.response.use(
function(response) {
NProgress.done() // 設(shè)置加載進(jìn)度條(結(jié)束..)
return response
},
function(error) {
return Promise.reject(error)
}
)
或者網(wǎng)上很多人寫在了router.beforeEach和router.afterEach乱豆，這種寫法只能切換路由時(shí)才有效果错沽。
個(gè)人感覺(jué)寫在axios的請(qǐng)求攔截器和響應(yīng)攔截器里比較好师脂，因?yàn)榍袚Q路由一般都會(huì)觸發(fā)頁(yè)面的created()事件發(fā)起axios請(qǐng)求
//導(dǎo)入
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
router.beforeEach((to, from, next) => {
NProgress.start()
next()
})
router.afterEach(() => {
NProgress.done()
})
以上兩種方法也可以同時(shí)一起寫上暴心！
最好在index.html也寫上，單頁(yè)面首次打開(kāi)速度慢缎患，這樣寫打開(kāi)登陸頁(yè)時(shí)也才會(huì)顯示惋增！
<script>
NProgress.start()
// 給頁(yè)面設(shè)置請(qǐng)求加載進(jìn)度條效果
window.onload = function() {
NProgress.done()
}
</script>
可以更改設(shè)置樣式：
#nprogress .bar {
background: red !important; //自定義顏色
}
配置NProgress:
- showSpinner：進(jìn)度環(huán)顯示隱藏
NProgress.configure({showSpinner: false});
- ease：調(diào)整動(dòng)畫設(shè)置，ease可傳遞CSS3緩沖動(dòng)畫字符串（如ease堕伪、linear揖庄、ease-in、ease-out欠雌、ease-in-out蹄梢、cubic-bezier）。speed為動(dòng)畫速度（單位ms）富俄。
NProgress.configure({ease:'ease',speed:500});
- minimum：設(shè)置最低百分比
NProgress.configure({minimum:0.3});
- 百分比：通過(guò)設(shè)置progress的百分比禁炒，調(diào)用 .set(n)來(lái)控制進(jìn)度，其中n的取值范圍為0-1蛙酪。
NProgress.set(0.4);
