NProgress 进度条

NProgress 实现进度条

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

参考文章@小丶侯
参考文章@CEZLZ

一、安装

npm install --save nprogress
yarn add nprogress

任选一种安装

用法：

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

二、引入使用

1. 配合 router 路由守卫使用

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.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 配置

NProgress.configure({
    
    
  showSpinner: false, //进度环显示隐藏
  ease: "ease", //ease：调整动画设置，ease可传递CSS3缓冲动画字符串（如ease、linear 等）。
  speed: 500, //speed为动画速度（单位ms）
  minimum:0.3,//最低百分比

});

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

修改进度条颜色

在 App.vue 中的 style 中增加：

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