NProgress进度条插件

NProgress是页面跳转是出现在浏览器顶部的进度条

官网：http://ricostacruz.com/nprogress/
github：https://github.com/rstacruz/nprogress

1.安装

$ npm install --save nprogress 或者
$ yarn add nprogress

//用法
NProgress.start(); // 显示
NProgress.done(); // 完成

2.使用

router.js

//导入
import NProgress from 'nprogress' // 进度条
import 'nprogress/nprogress.css' // 这个样式必须引入

router.beforeEach((to, from, next) => {
  NProgress.start()
  next()
})

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

3.简单个人配置

NProgress.set(0.6)  set(n) // 来设置进度，n是0-1的数字。
NProgress.inc(0.2) inc() // 随机增长进度条，注意，这个方法永远不会让进度条达到100%。
NProgress.configure({ easing: 'ease', speed: 500, showSpinner: false }) // 通过ease(一个CSS中的easing值)调整动画设置和速度speed（毫秒ms） speed进度时间  showSpinner是否显示进度环

愿以往所学皆有所获