1.前言

在平常瀏覽網頁時，我們會注意到在有的網站中，當點選頁面中的連結進行路由跳轉時，頁面頂部會有一個進度條，用來標示頁面跳轉的進度（如下圖所示）。雖然實際用處不大，但是對使用者來說，有個進度條會大大減輕使用者的等待壓力，提升使用者體驗。本篇文章就來教你如何在Vue專案中實現這樣的進度條。

2.安裝Nprogress

雖然我們也可以自己手動實現這樣的功能，但是，nprogress.js已經幫我們把進度條的樣式呀，功能呀都已經封裝的很好了，既然有現成的輪子，我們就直接使用輪子就好啦！

npm install nprogress -S

3.在router.js中引入Nprogress

由於我們需要將Nprogress繫結在路由鉤子上，所以我們直接在路由檔案router.js中引入Nprogress。

import NProgress from 'nprogress' 
import 'nprogress/nprogress.css'// nprogress樣式檔案

4.繫結路由鉤子

我們想要的效果是：當路由開始跳轉時載入進度條，當路由跳轉完畢時進度條載入完畢。幸運的是，在Vue中剛好為我們提供了路由開始跳轉和結束跳轉的鉤子，我們只需在引入Nprogress之後，將其繫結在路由鉤子上即可。程式碼如下：

//當路由開始跳轉時
router.beforeEach((to, from , next) => {
    // 開啟進度條
    NProgress.start();
    // 這個一定要加，沒有next()頁面不會跳轉的。這部分還不清楚的去翻一下官網就明白了
    next();
});
//當路由跳轉結束後
router.afterEach(() => {  
    // 關閉進度條
    NProgress.done()
})
 

5.效果圖

6.個性化配置

當然如果你對預設的進度條外觀樣式不滿意，Nprogress還提供了個性化配置外觀。

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

7.完整程式碼示例

完整程式碼示例請戳☞☞☞nprogresBar
（完）