在SPA应用中，通过NProgress实现顶部进度条可提升用户信任感，路由跳转时用beforeEach启动、afterEach收起，并需避免done()未调用导致卡住，支持颜色、高度、动画等简单定制。
在 SPA 应用中，路由切换时页面内容常有短暂空白或卡顿感。加一个顶部进度条，能立刻提升用户对“系统正在响应”的信任感。核心思路是：路由开始跳转时启动进度条，跳转完成时收起——全程由路由守卫控制，不依赖具体页面逻辑。
安装与基础引入
先安装 NProgress 及其样式文件：
- npm install nprogress（或用 yarn/pnpm）
- npm install @types/nprogress --save-dev（TypeScript 项目推荐）
- 在入口文件（如 main.ts 或 router/index.ts）中引入：
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
路由守卫中启动与结束
这是最关键的一步。把进度条的生命周期绑定到 Vue Router 的导航守卫上：
- 前置守卫 beforeEach：用户点击链接、编程式导航触发时立即调用 NProgress.start()
- 后置守卫 afterEach：路由成功解析并渲染后调用 NProgress.done()
- 注意：不要在
beforeEach中 await 异步操作后再调用 start，否则会延迟显示；start 要第一时间执行
示例代码（Vue Router 4）：
router.beforeEach(() => {
NProgress.start()
})
router.afterEach(() => {
NProgress.done()
})
Skill Weave Chains — 技能链路由引擎
下载
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
避免常见卡住问题
进度条“停在半路不动”是最典型的失败表现，通常由以下原因导致：
- 某个异步请求未正确拦截，done() 没被调用（比如请求报错但没进 response 拦截器的 error 分支）
- 路由守卫里用了
next(false)或next('/login')等中断流程，但没手动调用 NProgress.done() - 在 SSR 或服务端渲染场景误用，造成首屏闪烁（NProgress 仅适用于客户端）
建议统一在 router.afterEach 中调用 done()，并在 axios 请求拦截器中补一层兜底：
axios.interceptors.response.use(
() => NProgress.done(),
() => NProgress.done()
)
简单定制让进度条更贴合产品
无需复杂配置，几行就能改出品牌感：
- 修改颜色和高度：#nprogress .bar { background: #FF6F61; height: 2px; }
- 隐藏旋转图标（多数现代 UI 不需要）：NProgress.configure({ showSpinner: false })
- 加快初始响应速度：minimum: 0.1（默认 0.3，设低些能让进度条更快“动起来”）
- 禁用自动递增（避免假进度）：trickle: false，完全靠你手动控制
这样一套下来，路由切换的反馈就既轻量又专业了。
