用 vue router 导航守卫配合 nprogress 可实现路由跳转时自动显示顶部进度条；需在 main.ts 中 router 实例创建后、app.use(router) 前引入并配置 nprogress，于 beforeeach 启动、aftereach 结束，中断跳转时需手动 done()，并自定义样式与参数确保体验稳定。
用 Vue Router 的导航守卫配合 NProgress，就能在路由跳转时自动显示顶部进度条——它不依赖接口请求，启动快、控制准、体验稳。
安装与初始化要放对位置
先安装库并引入样式，否则进度条不会渲染：
- 运行
npm install nprogress --save（pnpm/yarn 同理） - 在
main.ts中，router 实例创建之后、app.use(router)之前 添加两行：
import NProgress from 'nprogress'<br>import 'nprogress/nprogress.css'
顺序错了会导致守卫不触发，进度条完全不出现。
在守卫中绑定生命周期
进度条的启停必须严格对应路由行为：
-
router.beforeEach里调NProgress.start()：用户点链接瞬间就动起来 -
router.afterEach里调NProgress.done()：页面渲染完成即收起 - 如果守卫中执行了
next('/login')这类中断跳转，afterEach不会执行，此时要在beforeEach内补一次NProgress.done()
配置细节影响实际体验
默认参数容易导致进度条“闪一下就没了”，建议提前配置：
-
showSpinner: false—— 关掉右上角旋转图标，更简洁 -
minimum: 0.3—— 初始进度不低于 30%，避免视觉丢失 -
speed: 500—— 动画持续 500ms，太快太慢都不自然 -
easing: 'ease'—— 用缓动函数，比线性更顺滑
这些写在 import 之后、守卫注册之前即可生效。
样式覆盖确保始终可见
默认样式可能被遮挡或颜色不协调，推荐在 App.vue 的全局 style 块中加：
#nprogress.bar {<br> background: #1890ff !important;<br> height: 3px !important;<br> position: fixed;<br> top: 0;<br> left: 0;<br> right: 0;<br> z-index: 9999;<br>}
这样进度条固定在视口顶部、蓝色细条、层级最高，适配所有页面布局。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
