Vue中nprogress頁面加載進度條的方法實現(xià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進行適當(dāng)?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āng)前導(dǎo)航即將離開的路由對象
next:調(diào)用該方法，進入下一個鉤子函數(shù)，next(false):則中斷當(dāng)前的導(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; // 自定義高度
}
參考 https://www.toutiao.com/i6718992880599302659/?group_id=6718992880599302659
到此這篇關(guān)于Vue中nprogress頁面加載進度條的方法實現(xiàn)的文章就介紹到這了,更多相關(guān)Vue nprogress加載進度條內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本篇文章主要介紹了Vue中組件數(shù)據(jù)的傳遞的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
本文主要介紹了在vue中寫jsx的幾種方式，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
這篇文章主要介紹了Vue3?PC端頁面開發(fā)規(guī)范及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
vue實現(xiàn)畫筆回放canvas轉(zhuǎn)視頻播放功能
這篇文章主要介紹了vue實現(xiàn)畫筆回放，canvas轉(zhuǎn)視頻播放功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2024-01-01
vue+scss+element-ui實現(xiàn)表格表頭斜杠一分為三方式
這篇文章主要介紹了vue+scss+element-ui實現(xiàn)表格表頭斜杠一分為三方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了vue項目接口域名動態(tài)獲取操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了VueCli3.0中集成MockApi的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
這篇文章主要介紹了通過Vue實現(xiàn)淘寶購物車中三級選中的功能，文中的實現(xiàn)過程講解詳細，對我們學(xué)習(xí)Vue有一定的幫助，感興趣的可以了解一下2022-01-01
在前端開發(fā)中,實現(xiàn)自定義右鍵菜單能夠為用戶提供更多功能選項,本文就來介紹了Vue中實現(xiàn)動態(tài)右鍵菜單的示例代碼,感興趣的可以了解一下2024-11-11
這篇文章主要介紹了vue分頁插件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12