您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關(guān)Vue項目中使用nprogress實現(xiàn)一個頁面加載進度條功能,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個參考,希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。
nprogress頁面加載進度條
前言
很多時候在訪問網(wǎng)頁的時候我們總是看到頁面在加載中,可以卻不知道要加載多久,無期限的等待總是讓人煩躁不安,所以我們希望能知道網(wǎng)頁加載的進度,這樣我們就能做到心中有數(shù)是否繼續(xù)等待頁面加載。這個功能我們可以依靠nprogress來實現(xiàn),它是輕量級的進度條組件,使用簡便,可以很方便集成到應(yīng)用中來。
安裝nprogress
直接在項目中執(zhí)行安裝命令:npm install --save nprogress
nprogress方法
NProgress.start() // 進度條開始 NProgress.set() // 將進度設(shè)置到具體的百分比位置,取值范圍是0到1.0 NProgress.inc() // 如果少量增加進度,進度將永遠不會得到100% NProgress.done() // 進度條結(jié)束消失 NProgress.configure() // 進度條參數(shù)配置
全局引入nprogress
在main.js中引入nprogress插件和樣式,
import NProgress from ‘nprogress' // nprogress插件 import ‘nprogress/nprogress.css' // nprogress樣式
配置nprogress
在NProgress.configure({})中我們可以對nprogress進行適當?shù)呐渲?,showSpinner 為 false(禁用進度環(huán))、trickle 為 false(關(guān)閉進度條步進)、trickleRate (每次步進增長多少)、trickleSpeed (步進間隔,單位毫秒ms)、ease(動畫方向)、speed (動畫速度,單位毫秒ms)、minimum (最小百分比)等等。
NProgress.configure({ showSpinner: false }) //我這里只關(guān)閉進度環(huán)
Vuerouter路由鉤子
在添加nprogress
之前我們需要先了解Vuerouter
的beforeEach
與afterEach
鉤子函數(shù),這是在路由跳轉(zhuǎn)的時候?qū)β酚蛇M行一些權(quán)限判斷或者其他操作時定義的處理函數(shù),Vue.beforeEach
是在跳轉(zhuǎn)之前執(zhí)行,Vue.afterEach
是在跳轉(zhuǎn)之后執(zhí)行判斷的。
Vue.beforeEach(function(to,form,next){})
函數(shù)有三個參數(shù),Vue.afterEach(function(to,form))
函數(shù)有兩個參數(shù):
to
:即將進入的路由對象
from
:當前導(dǎo)航即將離開的路由對象
next
:調(diào)用該方法,進入下一個鉤子函數(shù),next(false):則中斷當前的導(dǎo)航。
在路由中添加nprogress
在main.js中全局鉤子函數(shù),在路由跳轉(zhuǎn)前用NProgress.start()標記下進度條開始,在路由跳轉(zhuǎn)后用NProgress.done()標記下結(jié)束,這樣在路由跳轉(zhuǎn)的時候就可以在頁面頂部看到一個progress bar進度條了
import Vue from 'vue' import App from './App.vue' import router from '@/router/index.js' import store from './store' import Element from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import '@/assets/icons/index.js' import NProgress from 'nprogress' import 'nprogress/nprogress.css' Vue.use(Element) Vue.config.productionTip = false NProgress.configure({ showSpinner: false }) router.beforeEach((to, from, next) => { NProgress.start() next() }) router.afterEach(() => { NProgress.done() }) new Vue({ router, store, render: h => h(App) }).$mount('#app')
在請求中添加nprogress
如果你希望每次發(fā)送請求的時候也出現(xiàn)進度條的話可以在axios封裝中的路由攔截中添加nprogress
// 請求攔截器(請求發(fā)出前處理一些請求) axios.interceptors.request.use( NProgress.start() }) // 響應(yīng)攔截器(處理響應(yīng)數(shù)據(jù)) axios.interceptors.response.use( NProgress.done() )
為了讓結(jié)構(gòu)更滑清晰簡潔些,我們重新整理下代碼,即然nprogress主要是用在路由跳轉(zhuǎn)上,這里我將nprogress歸納放入router中,切記實例化router之后調(diào)用Vuerouter的beforeEach與afterEach鉤子函數(shù)生效。
import Vue from 'vue' import Router from 'vue-router' import routers from './routers' import NProgress from 'nprogress' import 'nprogress/nprogress.css' NProgress.configure({ showSpinner: false }) Vue.use(Router) const router = new Router({ mode: 'history', routes: routers }) export default router router.beforeEach((to, from, next) => { NProgress.start() next() }) router.afterEach(() => { NProgress.done() })
修改nprogress樣式
在app.vue中添加如下樣式即可修改nprogress樣式,記得添加 !important來覆蓋原有樣式
#nprogress .bar { background: #66B1FF !important; // 自定義顏色 height: 20px !important; // 自定義高度 }
關(guān)于Vue項目中使用nprogress實現(xiàn)一個頁面加載進度條功能就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學(xué)到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。