在vue中使用NProgress

NProgress

1、安装

npm install --save nprogress

2、使用

在router.js中

//导入
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

// 直接调用 start()或者done()来控制进度条。
router.beforeEach((to, from, next) => {
  NProgress.start() // 开始
  next()
})

router.afterEach(() => {
  NProgress.done()  // 结束
})

3、扩展使用

• 修改NProgress的颜色：在App.vue中的style中增加：

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

• 更改父容器（default: body）

  NProgress.configure({ parent: '#container' });
  

• 设置进度： 可以通过调用 .set(n)来设置进度（n是0-1的数字）

  NProgress.set(0.0);     // Sorta same as .start()
  NProgress.set(0.4);     //  从0.4的位置开始
  NProgress.set(1.0);     // Sorta same as .done()
  

• 增加进度： 调用 .inc()，进度将会增加一个随机的数量，但不会到达 100%

  NProgress.inc()