vue项目中使用nprogress加载进度条

nprogress 是页面跳转时候出现在浏览器顶部的进度条，后台系统和移动端都很常用。

 

安装

npm install --save nprogress

 

使用

import NProgress from 'nprogress' // Progress 进度条
import 'nprogress/nprogress.css' // Progress 进度条样式

NProgress.start(); //开始
NProgress.done(); // 结束

 

配合拦截登录，token验证

// 拦截登录，token验证
router.beforeEach((to, from, next) => {
    NProgress.start()
    if (store.getters.token && Cookie.get('User-Token')) {
        // 存在token
        if (to.path === '/login') {
            NProgress.done()
            next({ path: '/' })
        } else {
            if (store.getters.routers.length === 0) {
                console.log("进入验证权限")
                // 验证权限
                getProhibitedList({
                    site_id: store.getters.siteid
                }).then(res => {
                    // console.log(res);
                    const prohibitedList = res.list;
                    store.dispatch('GenerateRoutes', prohibitedList).then(() => {
                        router.addRoutes(store.getters.routers)
                        next({ ...to, replace: true })
                    })
                }).catch(err => {
                    console.log(err)
                    store.dispatch('removeLoginInfo').then(() => {
                        router.app.$router.push({ path: '/login' })
                    })
                })
            } else {
                next()
            }
        }
    } else {
        // 不存在token，去登录
        if (writeList.indexOf(to.path) >= 0) {
            next()
        } else {
            next({ path: '/login' })
            NProgress.done()
        }
    }
})
router.afterEach(() => {
    NProgress.done()
})