如何在Vue項目中給路由跳轉加上進度條

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
（完）