nprogress 介紹與作用

1.nprogress 是一個輕量級的進度條組件，主要用于在頁面加載或路由切換時顯示一個進度條，提升用戶體驗。它的原理是通過在頁面頂部創建一個 div，并使用 fixed 定位來實現進度條的效果

2.在 Vite + Vue 3 項目中，nprogress 可以在路由切換時顯示進度條，讓用戶知道頁面正在加載。這在多頁面應用中尤其有用，可以減少用戶的等待焦慮感

3.配合路由守衛，在路由切換時調用 nprogress 的 start() 和 done() 方法，即可實現進度條的顯示和隱藏

安裝依賴

npm install nprogress --save
npm install @types/nprogress --save-dev

使用 nprogress：在路由守衛中使用 nprogress 來顯示進度條

• router/index.ts 中使用

import {start , done} from '@/lib/nprogress'router.beforeEach((to, from, next) => {start(); // 開始進度條next();
});router.afterEach(() => {done(); // 結束進度條
});

• nprogress.ts 文件

 // /src/lib/nprogress.ts
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';//全局進度條的配置
NProgress.configure({easing: 'ease', // 動畫方式speed: 300, // 遞增進度條的速度showSpinner: false, // 是否顯示加載icotrickleSpeed: 200, // 自動遞增間隔minimum: 0.3, // 更改啟動時使用的最小百分比parent: 'body' //指定進度條的父容器
});// 打開進度條
export const start = () => {NProgress.start();
};// 關閉進度條
export const done = () => {NProgress.done();
};