网页顶部进度条-NProcess.js

背景

有些网站,比如github上在查看项目文件夹层级时会在网页顶部出现一个 进度条,为实现类似功能,经过查找,找到一个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) {
        // 通过cookie获取当前的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();
    }
})
posted @ 2018-09-13 16:36  起风以前抱紧我  阅读(1430)  评论(0编辑  收藏  举报