使用NProgress.js纳米级进度条

作用：NProgress.js是极细的纳米级进度条，用现实的细线条动画让用户看到网页正在发生的事情！
在用户切换页面的时候，可以看到网页正在加载的过程
官网：https://ricostacruz.com/nprogress/

1、安装

npm install nprogress

2、基本使用方法

（1）使用

router/index.js中引入

// 引入NProgress进度条
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

// 路由守卫
router.beforeEach((to,from,next)=>{
    
    
    // 进度条
    NProgress.start()
    next()
})

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

（2）修改样式

在全局CSS文件中写入（也可以独立出一个css文件，在页面处单独引入）

// 修改进度条颜色
#nprogress .bar {
    
    
  background: red !important;
}

（3）其他方法

① 显示进度条

NProgress.start()

② 进度条加载完成

NProgress.done()

③ 设置进度条加载的百分比

NProgress.set(0.4)

④ 进度条增加一点点

NProgress.inc()