用路由钩子配合nprogress实现页面加载进度条，核心是beforeeach启动、aftereach收尾；需安装插件、引入样式和配置，如关闭spinner、设minimum为0.3、speed为500ms，并通过css自定义颜色与高度。

用路由钩子配合 NProgress 实现页面加载进度条，核心就两点：跳转前启动、跳转后收尾。它不依赖真实加载耗时，靠的是路由行为触发，轻量又稳定。

安装与基础引入

先装插件并引入样式，否则进度条不会显示：

• 运行 npm install nprogress --save（或 yarn add nprogress）
• 在 main.js（Vue2）或 main.ts（Vue3）中添加两行：

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

关键配置项说明

调用 NProgress.configure() 可定制视觉和行为，常用设置有：

Skill Weave Chains — 技能链路由引擎

开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。

下载

• showSpinner: false —— 隐藏右上角旋转图标（推荐关闭）
• minimum: 0.3 —— 初始进度不低于 30%，避免刚启动就闪退
• speed: 500 —— 进度条动画完成时间（毫秒）
• trickleSpeed: 200 —— 自动递增间隔（毫秒），配合 trickle: true 使用
• easing: 'ease' —— 缓动函数，让动画更自然

路由守卫中控制进度条

必须在创建 router 实例之后、挂载 Vue 应用之前写入守卫：

• router.beforeEach 中调用 NProgress.start()，再执行 next()
• router.afterEach 中调用 NProgress.done()，无需参数

注意：不能把 done() 放在 beforeEach 里，否则还没跳转就结束了；也不能漏掉 next()，否则路由卡死。

自定义颜色与高度（可选）

直接覆盖默认样式即可，推荐放在 App.vue 的全局 style 块内：

#nprogress.bar {
  background: #1890ff !important;
  height: 3px !important;
  position: fixed;
  z-index: 9999;
}

这样进度条会变成蓝色细条，固定在顶部，层级足够高不被遮挡。