使用NProgress配合Vue Router导航守卫实现全局进度条，需在创建router实例后、app.use(router)前引入并配置，beforeEach启动、afterEach收起，异常跳转时beforeEach内补done()，并自定义样式确保可见。
在路由跳转时实现全局进度条，核心是用 NProgress 配合 Vue Router 的导航守卫，做到“跳转开始即显示、跳转完成即收起”，不依赖真实请求耗时，轻量稳定。
安装与基础引入
先安装插件并引入样式，否则进度条不会渲染：
- 运行 npm install nprogress --save（或 pnpm/yarn 对应命令）
- 在 main.ts（Vue3）或 main.js（Vue2）中添加两行：
import NProgress from 'nprogress' import 'nprogress/nprogress.css'
注意：必须在创建 router 实例之后、app.use(router) 之前引入和配置，否则守卫可能不生效。
在路由守卫中控制启停
进度条的生命周期要严格绑定路由行为：
在SEO发布前，从路由清单生成XML网站地图和robots.txt
下载
当代理已经知道网站路由或内容URL，并且在启动前需要有效的sitemap XML、sitemap索引或robots.txt引用时，请使用sitemap。这是一个发布构件技能，而不是爬虫或SEO平台。
- 在 router.beforeEach 中调用
NProgress.start()—— 跳转发起瞬间就启动 - 在 router.afterEach 中调用
NProgress.done()—— 跳转成功后收尾 - 若守卫内有
next('/login')等强制跳转，它会中断当前流程、不触发afterEach，此时需在beforeEach内手动补一次NProgress.done()
关键配置优化体验
调用 NProgress.configure() 可避免默认行为带来的干扰：
-
showSpinner: false—— 关掉右上角旋转图标，更简洁 -
minimum: 0.3—— 初始进度不低于 30%，防止一闪而过 -
speed: 500—— 动画过渡时长，单位毫秒 -
easing: 'ease'—— 使用缓动函数，视觉更自然
这些配置建议统一写在守卫注册前，例如紧接在 import 之后。
自定义样式确保可见
默认进度条可能被遮挡或颜色不协调，推荐在 App.vue 的全局 style 块中覆盖：
#nprogress.bar {
background: #1890ff !important;
height: 3px !important;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
}
这样进度条会固定在顶部、蓝色细条、层级足够高，适配所有页面。
