vue中頁面加載進度條效果的實現

有圖有真相，上圖爲頁面跳轉時顯示的進度條。

咱們在vue項目中，爲了減小首屏加載的時間，一般會開啓路由的懶加載。路由懶加載配合gizp確實能幫助咱們大大的加快首屏的加載時間。

然而，路由懶加載會使得咱們在第一次打開一個新頁面的時候，會有一個加載時間。若是在這個時候咱們沒有一個提示的話，給人的感受會是好像我點了頁面跳轉可是沒反應。因此，這個時候咱們能夠加一個進度條來告知用戶。

具體實現，咱們使用NProgress這個滾動條效果插件。固然了，滾動條你也能夠本身寫一個簡單的。

• 安裝：cnpm install --save nprogress

• main.js中引入：

//引入nprogressimport NProgress from 'nprogress'import 'nprogress/nprogress.css' //這個樣式必須引入複製代碼

• main.js中進行一些配置：

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

這裏根據本身的需求進行配置。

• 接下來，仍是在mian.js中，

router.beforeEach((to, from , next) => {
    // 每次切換頁面時，調用進度條
    NProgress.start();

    // 這個必定要加，沒有next()頁面不會跳轉的。這部分還不清楚的去翻一下官網就明白了
    next();
});複製代碼

router.afterEach(() => {  
    // 在即將進入新的頁面組件前，關閉掉進度條
    NProgress.done()
})複製代碼

而後打開頁面就能夠看到頁面正常在加載了。這裏送上GitHub地址

若是以爲不錯，就like一下吧~~