很多项目中需要在跳转路由时 页面顶部出现滚动条动画 ，当路由跳转成功后进度条消失 ，这个功能还是挺多见的，所以在简书里做个简单记录。
这个小功能具体实现 可以使用 插件 nprogress 配合 路由的前置守卫和后置守卫 ，结合实际项目具体代码如下：
import Vue from "vue"
import router from "../router.js"
import nprogress from 'nprogress' // 引入插件nprogress
import 'nprogress/nprogress.css' // 引入nprogress样式css
let routerVue = new Vue();
nprogress.inc(1) // 进度条的初始化
nprogress.configure({ // 进度条的配置信息
easing: 'ease',
speed: 2000,
showSpinner: false
})
router.beforeEach((to, from, next) => {
nprogress.start() // 开始加载进度条
let toPath = to.path.split('/')
// 以下代码是实际项目中的逻辑代码，
if(from.path == '/' && toPath.length == 2) {
if(parseInt(sessionStorage.getItem("defaultDisplay")) == 1) {
// if(toPath[1] == 'orgDataCenter') {
// next()
// } else {
// router.push("/orgDataCenter");
// }
if(toPath[1] == 'dataCenter'){
next()
}else{
router.push("/dataCenter");
}
} else if(parseInt(sessionStorage.getItem("defaultDisplay")) == 0) {
next()
} else {
routerVue.http('/mushu/login/getLoginUser', {}, 'get').then((data) => {
sessionStorage.setItem("defaultDisplay", data.defaultDisplay);
if(data.defaultDisplay == 1) {
// router.push("/orgDataCenter");
router.push("/dataCenter");
} else {
next()
}
}, () => {
next()
})
}
} else {
next()
}
})
// 后置守卫里进度条动画加载完毕
router.afterEach(() => {
nprogress.done()
})
