NProgress.js 官网：https://ricostacruz.com/nprogress/

安装方式：

npm install nprogress

使用方法

在router 的index.js文件下引入

// 引入NProgress进度条 import NProgress from 'nprogress' import 'nprogress/nprogress.css' router.beforeEach((to,from,next)=>{  // 进度条  NProgress.start()  next() }) router.afterEach(()=>{  NProgress.done()  })

修改进度条样式

// 修改进度条颜色 全局css文件中添加，也可以独立出一个css文件，在页面处单独引入 #nprogress .bar {  background: red !important; }

NProgress.js的一些方法：

显示进度条（shows the progress bar）：

NProgress.start()

设置进度条加载的百分比（sets a percentage）

NProgress.set(0.4)

进度条增加一点点（increments by a little）

NProgress.inc()

进度条加载完成（completes the progress）

NProgress.done()

圆圈加载：showSpinner

加载条右下方的小圈圈，通过将加载微调器设置为 false 来关闭它。（默认值：true)

NProgress.configure({ showSpinner: false });