Vue 中的使用 nProgress 教程

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

1.nProgress 安装

npm install --save nprogress

 

2.在main.js 中引入nProgress 和 css 样式

//导入进度条插件\js与css
import Nprogress from 'nprogress'
import 'nprogress/nprogress.css'

3.主要方法

NProgress.start() — 显示进度条
NProgress.done() — 完成进度
NProgress.set(Number) — 设置百分比
NProgress.inc() — 增加一点点，随机数

4.主要配置

NProgress.config({
  minimum:0.1, // 最小百分比
  template: "..." // 修改标记结构，需要一个包含 role='bar' 属性的元素。
  ease: 'ease',  // 动画设置
  speed: 500, // 速度设置毫秒ms
  trickle: false, // 关闭进度条步进
  trickleRate: 0.02, // 度条步进
  trickleSpeed: 800, // 度条步进速度毫秒ms
  showSpinner: false // 关闭进度环 默认true
})

一般可以将方法写在路由守卫中