网页顶部进度条-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();
    }
})

转载于:https://www.cnblogs.com/Mxy-cnblog/p/9641456.html