在vue項目中，為了減少首屏加載的時間，通常會開啟路由的懶加載。路由懶加載配合gizp確實能幫助我們大大的加快首屏的加載時間。

然而，路由懶加載會使得我們在第一次打開一個新頁面的時候，會有一個加載時間。如果在這個時候我們沒有一個提示的話，給人的感覺會是好像我點了頁面跳轉(zhuǎn)但是沒反應(yīng)。所以，這個時候我們可以加一個進(jìn)度條來告知用戶。

具體實現(xiàn)，我們使用NProgress這個滾動條效果插件。

1.安裝：

cnpm install --save nprogress

2.在main.js中引入：

import NProgress from ’nprogress’ import ’nprogress/nprogress.css’

3.在main.js中進(jìn)行配置：

NProgress.configure({ easing: ’ease’, // 動畫方式 speed: 500, // 遞增進(jìn)度條的速度 showSpinner: false, // 是否顯示加載ico trickleSpeed: 200, // 自動遞增間隔 minimum: 0.3 // 初始化時的最小百分比})

4.在main.js中對路由鉤子進(jìn)行設(shè)置：

//當(dāng)路由進(jìn)入前 router.beforeEach((to, from , next) => { // 每次切換頁面時，調(diào)用進(jìn)度條 NProgress.start(); // 若加載時間長且不定，擔(dān)心進(jìn)度條走完都沒有加載完，可以調(diào)用NProgress.inc（）；//這會以隨機(jī)數(shù)量遞增，且永遠(yuǎn)達(dá)不到100%，也可以設(shè)指定增量 next(); });//當(dāng)路由進(jìn)入后：關(guān)閉進(jìn)度條router.afterEach(() => { // 在即將進(jìn)入新的頁面組件前，關(guān)閉掉進(jìn)度條 NProgress.done()})

補(bǔ)充：vue頁面跳轉(zhuǎn)方法

vue2.0在使用的過程中， .vue文件之間的跳轉(zhuǎn)，需要在router里面配置path，通過路徑跳轉(zhuǎn)，html文件跳轉(zhuǎn)如下：

<router-link to='/path'><button>跳轉(zhuǎn)</button></router-link>

但是有時的需求是頁面不直接跳轉(zhuǎn)，有確認(rèn)彈框或者其他事件，此時就需要在js中設(shè)置跳轉(zhuǎn)，方法如下：

this.$ router.push({path: ‘/…’}); path為跳轉(zhuǎn)路徑，此方法會產(chǎn)生歷史記錄this.$ router.push({name:’…’}) name也可以作為路由跳轉(zhuǎn)this.$ router.push({path:‘home’,query:{obj:’…’}}) query：參數(shù)，可通過this.$ route.query.obj獲取this.$ router.push({path:‘home’,params:{obj:’…’}}) query：參數(shù)，可通過this.$route.params.obj獲取this.$router.replace() 此方法不會產(chǎn)生歷史記錄this.$router.go(n) 向前或向后跳轉(zhuǎn)n個頁面

總結(jié)

到此這篇關(guān)于Vue項目頁面跳轉(zhuǎn)時瀏覽器窗口上方顯示進(jìn)度條功能的文章就介紹到這了,更多相關(guān)vue 頁面跳轉(zhuǎn)進(jìn)度條內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！