vue3 nprogress 使用

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();
};