下载依赖

npm install nprogress --save

在router中的index.js中引入

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

在router中得index.js使用通过路由守卫

router.beforeEach((to, from, next) => {
    NProgress.start() // 开始
next()
})

router.afterEach((to, from) => {
    NProgress.done() // 结束
})

自定义进度条颜色在app.vue页面

/* 进度条自定义颜色 */
#nprogress .bar {
    background-color: red !important;
}