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

愣錘發表於2018-06-26
Vue

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一下吧~~


相關文章