Vue項目頁面跳轉時候的，瀏覽器窗口上方的進度條顯示

1.安裝：

cnpm install --save nprogress

2.在main.js中引入：

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

3.在main.js中進行配置：

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

4.在main.js中對路由鈎子進行設置：

 //當路由進入前
 router.beforeEach((to, from , next) => {
     // 每次切換頁面時，調用進度條
    NProgress.start();
    // 這個一定要加，沒有next()頁面不會跳轉的。這部分還不清楚的去翻一下官網就明白了
     next();
 });
//當路由進入后：關閉進度條
router.afterEach(() => {  
    // 在即將進入新的頁面組件前，關閉掉進度條
    NProgress.done()
})