先来看下效果

主要是在点击左侧menu菜单栏的时候加载进度条，并且右上角有一个小loading，当路由切换完成的时候进度条到底，loading小动画和进度条一起消失

主要用到的是element-ui中的Progress组件和nprogress，首先在项目中安装nprogress：npm install --save nprogress
安装
nprogress的npm文档介绍：https://www.npmjs.com/package/nprogress
主要通过这两个方法来控制进度条

写代码之前先思考一下，该怎么写最方便，用最少的代码实现最多的功能，既然这个进度条实在路由跳转的时候开始加载的，在跳转到页面完成的时候他就消失了；那么思路就来了，可以利用vue-router中的beforeEach和afterEach来实现

引入nprogress、router相关

import router from './index'
import 'nprogress/nprogress.css'
import NProgress from 'nprogress'

然后在跳转前开始加载进度条

router.beforeEach((to, from, next) => {
	NProgress.start()
	//do other something
	const token = getToken()
    if (token) {
        if (to.name === 'login') {
            next('/analysis_dashboard')
            NProgress.done()
            return
        }
        //判断当前用户是否有权限
        if (hasPermission(to, store.getters.user.auths)) {
	        next()
        } else {
            alert('当前账号没有权限访问')
        }
        next()
    }
}

路由跳转完成后

router.afterEach(to => {
    NProgress.done()
    document.title = getDocumentTitle(to)
})