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