這篇文章將為大家詳細講解有關Vue項目中使用nprogress實現一個頁面加載進度條功能，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
nprogress頁面加載進度條
前言
很多時候在訪問網頁的時候我們總是看到頁面在加載中，可以卻不知道要加載多久，無期限的等待總是讓人煩躁不安，所以我們希望能知道網頁加載的進度，這樣我們就能做到心中有數是否繼續等待頁面加載。這個功能我們可以依靠nprogress來實現，它是輕量級的進度條組件，使用簡便，可以很方便集成到應用中來。
安裝nprogress
直接在項目中執行安裝命令：npm install --save nprogress
nprogress方法
NProgress.start() // 進度條開始 NProgress.set() // 將進度設置到具體的百分比位置，取值范圍是0到1.0 NProgress.inc() // 如果少量增加進度，進度將永遠不會得到100% NProgress.done() // 進度條結束消失 NProgress.configure() // 進度條參數配置
全局引入nprogress
在main.js中引入nprogress插件和樣式，
import NProgress from ‘nprogress' // nprogress插件 import ‘nprogress/nprogress.css' // nprogress樣式
配置nprogress
在NProgress.configure({})中我們可以對nprogress進行適當的配置，showSpinner 為 false（禁用進度環）、trickle 為 false（關閉進度條步進）、trickleRate （每次步進增長多少）、trickleSpeed （步進間隔，單位毫秒ms）、ease（動畫方向）、speed （動畫速度，單位毫秒ms）、minimum （最小百分比）等等。
NProgress.configure({ showSpinner: false }) //我這里只關閉進度環Vuerouter路由鉤子
在添加nprogress之前我們需要先了解Vuerouter的beforeEach與afterEach鉤子函數，這是在路由跳轉的時候對路由進行一些權限判斷或者其他操作時定義的處理函數，Vue.beforeEach是在跳轉之前執行，Vue.afterEach是在跳轉之后執行判斷的。
Vue.beforeEach(function(to,form,next){})函數有三個參數，Vue.afterEach(function(to,form))函數有兩個參數：
to:即將進入的路由對象
from:當前導航即將離開的路由對象
next:調用該方法，進入下一個鉤子函數，next(false):則中斷當前的導航。
在路由中添加nprogress
在main.js中全局鉤子函數，在路由跳轉前用NProgress.start()標記下進度條開始，在路由跳轉后用NProgress.done()標記下結束，這樣在路由跳轉的時候就可以在頁面頂部看到一個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
如果你希望每次發送請求的時候也出現進度條的話可以在axios封裝中的路由攔截中添加nprogress
// 請求攔截器(請求發出前處理一些請求) axios.interceptors.request.use( NProgress.start() }) // 響應攔截器（處理響應數據） axios.interceptors.response.use( NProgress.done() )
為了讓結構更滑清晰簡潔些，我們重新整理下代碼，即然nprogress主要是用在路由跳轉上，這里我將nprogress歸納放入router中，切記實例化router之后調用Vuerouter的beforeEach與afterEach鉤子函數生效。
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; // 自定義高度
}關于Vue項目中使用nprogress實現一個頁面加載進度條功能就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
