NProgress.js —— vue页面顶部添加进度条

官方网站：https://ricostacruz.com/nprogress/

使用起来非常简单：

• 首先是路由变化的时候产生，页面跳转就会触发

/*
 * @Author: Chris 
 * @Date: 2022-10-28 10:41:14 
 * @Last Modified by: Chris
 * @Last Modified time: 2022-10-28 13:44:47
 * @msg 进度条，页面顶部一个页面跳转的进度条
 */

import router from "./index";
import NProgress from "nprogress";
import "nprogress/nprogress.css";

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

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

• 然后是请求发出的时候触发

/*
 * @Author: Chris 
 * @Date: 2022-07-26 14:52:45 
 * @Last Modified by: Chris
 * @Last Modified time: 2022-10-28 13:44:44
 */

import axios from "axios";
import Vue from "vue";
import NProgress from "nprogress";
import "nprogress/nprogress.css";


// 请求拦截 可在请求头中加入token等
service.interceptors.request.use(config => {
    NProgress.start() // 设置加载进度条(开始..)
}, error);

/**
 * 响应拦截器
 * */

service.interceptors.response.use(res => {
    NProgress.done() // 设置加载进度条(结束..
}, error);

• 然后是更换颜色啥的

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