Vue Router 中用 NProgress 实现顶部进度条，需安装库并引入 CSS，在 beforeEach 启动、afterEach 收起，配合 axios 响应拦截器兜底，再通过 configure 和 CSS 定制样式。
在 Vue Router 管理的单页应用中，路由切换时加一个顶部进度条，核心是用 NProgress 库配合路由守卫控制启停，不依赖页面逻辑，轻量又可靠。
安装与基础引入
先安装 NProgress 及其类型定义（TypeScript 项目建议加上）：
npm install nprogress-
npm install @types/nprogress --save-dev（TS 项目）
在路由配置文件（如 src/router/index.ts）或入口文件中引入：
import NProgress from 'nprogress'import 'nprogress/nprogress.css'
用路由守卫绑定进度条生命周期
进度条必须和路由跳转节奏严格对齐：点击即启动、渲染完成即收起。关键就在两个守卫：
立即学习“前端免费学习笔记（深入）”；
-
router.beforeEach(() => NProgress.start())—— 立刻执行，不 await、不延迟 -
router.afterEach(() => NProgress.done())—— 无论跳转成功或失败，都确保收起
注意：不要在 beforeEach 中写异步逻辑后再调 start()，否则用户点下去没反应，体验打折。
避免进度条卡住不动
“进度条停在 30% 不动”是最常见问题，通常因为 done() 没被调用。常见原因包括：
- 路由中断（如
next(false)或重定向到登录页），但没手动NProgress.done() - 接口请求报错，未在 axios 响应拦截器里兜底调用
done() - 服务端渲染（SSR）环境下误用（NProgress 仅适用于客户端）
推荐补一层保险：在 axios 响应拦截器中统一收尾：
axios.interceptors.response.use(() => NProgress.done(), () => NProgress.done())
简单定制更贴合项目风格
几行配置就能让进度条有品牌感：
- 关掉右侧旋转图标：
NProgress.configure({ showSpinner: false }) - 加快初始响应（默认 0.3，设为 0.1 更灵敏）：
minimum: 0.1 - 禁用自动递增（避免“假进度”）：
trickle: false - 自定义颜色和高度（CSS）：
#nprogress .bar { background: #409eff; height: 2px; }
这样一套下来，路由切换就有了专业、可控、不干扰的加载反馈。
