简介：NProgress 是浏览器加载时，出现在浏览器顶部的进度条。

文章目录：

一、NProgress 安装

二、NProgress 使用

三、NProgress 配置

四、Vue 中修改进度条颜色

一、NProgress 安装

1、使用 npm 或者 yarn 安装及可

npm install --save nprogress

yarn add nprogress

任选一种安装

2、用法

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

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

二、NProgress 使用

1、路由文件中导入，页面跳转出现进度条

入口文件 main.js 引入 nprogress

import App from './App'

import VueRouter from 'vue-router'

import router from './router' // 路由配置文件

//引入 nprogress

import NProgress from 'nprogress' // 进度条

import 'nprogress/nprogress.css' // 引入样式

Vue.use(VueRouter)

// 简单配置

NProgress.inc(0.2)

NProgress.configure({ easing: 'ease', speed: 500, showSpinner: false })

// 进度条开始

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

NProgress.start()

next()

})

// 进度条结束

router.afterEach(() => {

NProgress.done()

})

new Vue({

el: '#app',

router,

render: h => h(App)

})

2、写在 axios 的请求拦截器和响应拦截器里，每次只要触发 axios 请求就加载进度条

// axios 请求拦截器

axios.interceptors.request.use(

config => {

NProgress.start() // 加载进度条开始

return config

},

error => {

return Promise.reject(error)

}

)

// 在 response 拦截器中，隐藏进度条 NProgress.done()

axios.interceptors.response.use(

response => {

NProgress.done() // 加载进度条结束

return response

},

error => {

return Promise.reject(error)

}

)

三、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; //自定义颜色

}