Vue Router 路由管理如何实现路由切换时的页面加载进度条特效

Vue Router 中用 NProgress 实现顶部进度条，需安装库并引入 CSS，在 beforeEach 启动、afterEach 收起，配合 axios 响应拦截器兜底，再通过 configure 和 CSS 定制样式。

在 Vue Router 管理的单页应用中，路由切换时加一个顶部进度条，核心是用 NProgress 库配合路由守卫控制启停，不依赖页面逻辑，轻量又可靠。

安装与基础引入

先安装 NProgress 及其类型定义（TypeScript 项目建议加上）：

1. npm install nprogress
2. npm install @types/nprogress --save-dev（TS 项目）

在路由配置文件（如 src/router/index.ts）或入口文件中引入：

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

用路由守卫绑定进度条生命周期

进度条必须和路由跳转节奏严格对齐：点击即启动、渲染完成即收起。关键就在两个守卫：

1. router.beforeEach(() => NProgress.start()) —— 立刻执行，不 await、不延迟
2. router.afterEach(() => NProgress.done()) —— 无论跳转成功或失败，都确保收起

注意：不要在 beforeEach 中写异步逻辑后再调 start()，否则用户点下去没反应，体验打折。

避免进度条卡住不动

“进度条停在 30% 不动”是最常见问题，通常因为 done() 没被调用。常见原因包括：

1. 路由中断（如 next(false) 或重定向到登录页），但没手动 NProgress.done()
2. 接口请求报错，未在 axios 响应拦截器里兜底调用 done()
3. 服务端渲染（SSR）环境下误用（NProgress 仅适用于客户端）

推荐补一层保险：在 axios 响应拦截器中统一收尾：

1. axios.interceptors.response.use(() => NProgress.done(), () => NProgress.done())

简单定制更贴合项目风格

几行配置就能让进度条有品牌感：

1. 关掉右侧旋转图标：NProgress.configure({ showSpinner: false })
2. 加快初始响应（默认 0.3，设为 0.1 更灵敏）：minimum: 0.1
3. 禁用自动递增（避免“假进度”）：trickle: false
4. 自定义颜色和高度（CSS）：#nprogress .bar { background: #409eff; height: 2px; }

这样一套下来，路由切换就有了专业、可控、不干扰的加载反馈。