项目中 进度条组件的封装

很多项目中需要在跳转路由时 页面顶部出现滚动条动画 ，当路由跳转成功后进度条消失 ，这个功能还是挺多见的，所以在简书里做个简单记录。
这个小功能具体实现 可以使用 插件 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()
})