前言：

       nprogress是页面跳转时出现在浏览器顶部的进度条 

      官网：http://ricostacruz.com/nprogress/       
      github：https://github.com/rstacruz/nprogress

正文：

       一。在vue工程中下载nprogress依赖包

       npm install nprogress --save

      二。在src文件夹中创建permission.js文件

import router from './router'
import NProgress from 'nprogress' // Progress 进度条
import 'nprogress/nprogress.css'// Progress 进度条样式
router.beforeEach((to, from, next) => {
  NProgress.start()
  next()
})

router.afterEach(() => {
  NProgress.done()
})

      三。在main.js中全局注册进度条

import '@/permission'

      四。效果图

                       

结语：

        在项目中，进度条的颜色肯定期望可以自定义，进度条的自定义也非常简单：

        只需要在App.vue中自定义写style样式即可：

<style>
#nprogress .bar {
  background: #42b983 !important;
}
</style>