Vue中使用NProgress实现进度条

简介

NProgress是页面跳转或者发生异步请求是浏览器顶部的进度条

GitHub地址：https://github.com/rstacruz/nprogress

在线演示地址：http://ricostacruz.com/nprogress/

 

效果如下：

 

 

 

安装

## 1.使用 npm 或者 yarn 安装及可

① npm install --save nprogress 
② yarn add nprogress

两种任选一种安装

## 2.用法

NProgress.start(); //进度条出现
NProgress.done();  //进度条消失

 

使用

 

*** 路由文件中导入，页面跳转出现进度条（router.js）

## 1.导入 （导入文件可以是 路由文件 也可以是 异步请求文件）

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

## 2.使用

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

router.afterEach(() => {
  //进度条消失
  NProgress.done()
}

 

 

*** 异步请求文件中导入，发送请求出现进度条（这里使用 axios 发送请求）

** axios 手册地址 **

## 1.导入

// 引入nprogress插件

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

## 2.使用

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
　　// 出现进度条
    NProgress.start()return config
}, function (error) {
    // Do something with request error
    return Promise.reject(error)
})

// 在 response 拦截器中，隐藏进度条 NProgress.done()
axios.interceptors.response.use(config => {
    NProgress.done()
    return config
})

 

 

NProgress配置

## 1.showSpinner：进度环显示隐藏

NProgress.configure({showSpinner: false});

## 2.ease：调整动画设置，ease可传递CSS3缓冲动画字符串（如ease、linear 等）。speed为动画速度（单位ms）

NProgress.configure({ease:'ease',speed:500});

## 3.minimum：最低百分比

NProgress.configure({minimum:0.3});

## 4.百分比：通过设置progress的百分比，调用 .set(n)来控制进度，其中n的取值范围为0-1。

NProgress.set(0.4);

 

 

VUE中修改进度条颜色

在App.vue中的style中增加：

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

 

 

 

特此声明：如需转载请注明出处，如有疑问请及时提出以便于改正，如有侵权，联系删除，谢谢