網頁頂部進度條-NProcess.js

背景

有些網站，好比github上在查看項目文件夾層級時會在網頁頂部出現一個 進度條，雖然是PC端卻有一種移動端體驗，我的認爲能夠提高使用體驗，經查閱相關資料後，找到一個NProgress.js全站進度條插件

示例

在使用vue開發SPA應用時，Main.js裏在作權限判斷頁面跳轉的時候能夠用到

import NProgress from 'nprogress' // Progress 進度條;
import 'nprogress/nprogress.css'// Progress 進度條樣式
...

NProgress.configure({ showSpinner: false }, { ease: 'ease', speed: 600 });
router.beforeEach((to, from, next) => {

    NProgress.start();
    // 判斷該路由是否須要登陸權限
    if (to.meta.requireAuth) {
        // 經過vuex state獲取當前的token是否存在
        if (Vue.cookie.get('auth_token') != null) {
            next();

            NProgress.done();
        } else {
            //alert("身份已過時，請從新登陸");
            Vue.prototype.$message({
                type: "error",
                message: "身份已過時，請從新登陸"
            });
            next({
                path: '/Login',
                query: { redirect: to.fullPath } // 將跳轉的路由path做爲參數，登陸成功後跳轉到該路由
            });
            NProgress.done();
        }
    } else {
        next();
        NProgress.done();
    }
})