Vue项目中通过NProgress配合router.beforeEach和router.afterEach实现路由跳转进度条，需安装引入、精准启停、配置优化及自定义样式。
在 Vue 项目中，通过全局路由守卫控制加载进度条，核心是用 NProgress 配合 router.beforeEach 和 router.afterEach 实现“跳转即显、完成即隐”，不依赖接口请求，轻量且稳定。
安装与基础引入
必须先安装并正确引入，否则进度条无法渲染：
- 运行
npm install nprogress --save（或 pnpm/yarn 对应命令） - 在
main.ts（Vue 3）或main.js（Vue 2）中，紧接在创建router实例之后、app.use(router)之前添加两行：
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
在守卫中精准启停
生命周期需严格绑定路由行为，避免漏掉或重复调用：
立即学习“前端免费学习笔记（深入）”；
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
- 在
router.beforeEach中调用NProgress.start()—— 跳转发起瞬间就启动 - 在
router.afterEach中调用NProgress.done()—— 跳转成功后收尾 - 若守卫内执行了
next('/login')等中断式跳转，afterEach不会触发，此时需在beforeEach内手动补一次NProgress.done()
关键配置提升体验
默认行为容易造成闪烁或干扰，推荐统一配置（写在守卫注册前）：
-
showSpinner: false—— 关闭右上角旋转图标，界面更干净 -
minimum: 0.3—— 初始进度不低于 30%，防止一闪而过 -
speed: 500—— 动画时长设为 500 毫秒，过渡更自然 -
easing: 'ease'—— 使用缓动函数，视觉更顺滑
自定义样式确保可见
默认样式可能被遮挡或颜色不协调，建议在 App.vue 的全局 <style> 块中覆盖：
#nprogress.bar {
background: #1890ff !important;
height: 3px !important;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
}
这样进度条会固定在页面顶部、蓝色细条、层级足够高，适配所有路由视图。
