NProgress的简单使用

1.安装NProgress

NPM

npm install --save nprogress

Yarn

yarn add nprogress

2.引入

可以直接引入js、css或者通过cdn引入

<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>

Vue项目中

// 引入NProgress
import NProgress from 'nprogress'
// 引入nprogress样式文件
import'nprogress/nprogress.css'

3.使用

在这里主要说下Vue项目中的基本使用

3.1 发送请求时展示进度条

//设置request拦截器,在发起请求的时,展示进度条
axios.interceptors.request.use(config => {
  // 展示进度条
  NProgress.start()
})

// 设置response拦截器，在请求结束时,关闭进度条
axios.interceptors.response.use(config => {
  // 关闭进度条
  NProgress.done()
})

3.2 路由跳转时展示进度条

router.beforeEach((to, from, next) => {
  // 开启进度条
  NProgress.start()
  next()
})

router.afterEach((to, from, next) => {
  // 关闭进度条
  NProgress.done()
})

3.3 Nprogress的其他方法

可以通过调用 .set(n)来设置进度，n是0-1的数字。

NProgress.set(0.0);     
NProgress.set(0.4);
NProgress.set(1.0);     

可以使用inc()随机增长进度条，注意，这个方法永远不会让进度条达到100%。

NProgress.inc();