vue项目的进度条插件 -- nprogress

• 简介
  在Vue项目中，nprogress是一个轻量级的Ajax进度条组件。
  官网：https://www.npmjs.com/package/nprogress
• 实现效果
  路由切换时显示进度条
• 安装

npm install --save nprogress

• 使用

import nprogress from 'nprogress'
import 'nprogress/nprogress.css'
router.beforeEach((to, from, next) => {
  nprogress.start() // 开启进度条
  next()
})
router.afterEach((to, from) => {
  nprogress.done() // 进度完成
})
// nprogress.set(0.4);  // 在nprogress.start()之后调用，让进度条卡在40%的位置
// nprogress.configure({ showSpinner: false }) // 去除加载时的小圆圈

• 修改进度条样式

/* 修改进度条样式 */
#nprogress .bar {
  background-color: red !important;
  height: 3px !important;
}