如下图所示，绿色的进度条就是NProgress实现的效果

1、安装

  1. $ npm install --save nprogress 或者
  2. $ yarn add nprogress
  4. //用法
  5. NProgress.start();
  6. NProgress.done();

2、使用

router.js

  1. //导入
  2. import NProgress from 'nprogress'
  3. import 'nprogress/nprogress.css'
  5. router.beforeEach((to, from, next) => {
  6.   NProgress.start()
  7.   next()
  8. })
  10. router.afterEach(() => {
  11.   NProgress.done()
  12. })

改变颜色

在App.vue中的style中增加：

https://madewith.cn/23

  1. #nprogress .bar {      
  2.   background: red !important; //自定义颜色 
  3. }