如何在Vue專案中給路由跳轉加上進度條
阿新 • • 發佈:2018-12-23
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
(完)