Vue項目頁面跳轉時，視窗上方顯示進度條

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

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

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

1.安裝：

cnpm install --save nprogress

2.在main.js中引入：

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

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

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

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

 //當路由進入前

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