一、安裝nprogress

npm i nprogress

二、 在axios的請求攔截器中使用nprogress

如果對于axios的請求和響應攔截器的使用不了解的，可以看這篇文章：

axios二次封裝配置請求攔截器和響應攔截器-CSDN博客

nprogress上有兩個有用的方法：

star() 方法用于開啟進度條

done() 方法用于關閉進度條

我們只要在請求攔截器中開啟進度條，在響應攔截器中關閉進度條即可：

// 引入nprogress 對象和樣式
import nProgress from "nprogress";
import "../../node_modules/nprogress/nprogress.css";const requestObj = axios.create({baseURL: "/api",timeout: 5000
});// 請求攔截器
requestObj.interceptors.request.use((config) => {// 開啟進度條樣式nProgress.start();return config;
})// 響應攔截器
requestObj.interceptors.response.use((res) => {// 關閉進度條樣式nProgress.done();return res.data;
}, (error) => {return Promise.reject(new Error('faile'));
})

配置完成后，我們刷新頁面就會有一條藍色的進度條：

?

三、修改進度條顏色

直接在node_modules/nprogress/nprogress.css 中修改樣式即可：