nprogress頁面加載進度條

前言

很多時候在訪問網頁的時候我們總是看到頁面在加載中，可以卻不知道要加載多久，無期限的等待總是讓人煩躁不安，所以我們希望能知道網頁加載的進度，這樣我們就能做到心中有數是否繼續等待頁面加載。這個功能我們可以依靠nprogress來實現，它是輕量級的進度條組件，使用簡便，可以很方便集成到應用中來。

安裝nprogress

直接在項目中執行安裝命令：npm install --save nprogress

nprogress方法

NProgress.start() // 進度條開始NProgress.set() // 將進度設置到具體的百分比位置，取值范圍是0到1.0NProgress.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 = falseNProgress.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; // 自定義高度 }

參考 https://www.toutiao.com/i6718992880599302659/?group_id=6718992880599302659

到此這篇關于Vue中nprogress頁面加載進度條的方法實現的文章就介紹到這了,更多相關Vue nprogress加載進度條內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！