Nprogress优雅实现页面加载进度条

发布于：2025-04-18 ⋅ 阅读:(65) ⋅ 点赞:(0)

一、Nprogress 是什么

Nprogress 是一个轻量级的页面加载进度条库，通过动态展示页面加载状态提升用户体验。它无需依赖其他库，支持自定义样式和动画效果，非常适合配合Vue Router实现路由切换时的加载反馈，下面我们以Vue3项目举例讲解一下如何优雅使用Nprogress。

二、安装与基础配置

1. 安装依赖

npm install nprogress --save
# 或
yarn add nprogress

2. 引入基础样式

在入口文件 main.ts 中引入核心CSS：

import "nprogress/nprogress.css";

三、Vue3中基础使用

1. 手动控制进度条

import NProgress from "nprogress";

// 启动进度条
NProgress.start();

// 完成时关闭
NProgress.done();

// 带递增动画
NProgress.inc(0.2);

2. 与Vue Router集成

在路由配置文件 router/index.ts 中配置全局守卫：

import router from "./router";
import NProgress from "nprogress";

router.beforeEach((to, from, next) => {
  NProgress.start();
  next();
});

router.afterEach(() => {
  NProgress.done();
});

在路由跳转时进度条增加用户的体验感

在这里插入图片描述

四、Nprogress配置技巧

1. 自定义样式

在全局CSS中覆盖默认变量：

#nprogress .bar {
  background: #42b983; /* Vue主题色 */
  height: 3px;
}

#nprogress .peg {
  box-shadow: 0 0 10px #42b983, 0 0 5px #42b983;
}

2. 修改动画效果

NProgress.configure({
  easing: "ease", // 动画曲线
  speed: 500,     // 动画速度
  showSpinner: false // 隐藏旋转图标
});

五、可能遇到的问题

1. 进度条未自动隐藏

确保在afterEach和错误回调中都调用done()：

router.onError(() => {
  NProgress.done();
});

2. 样式未生效检查

确保已正确引入CSS文件
检查CSS选择器权重是否被覆盖

3. 与Axios拦截器配合

在请求拦截器中启动进度条，响应拦截器中完成：

axios.interceptors.request.use(config => {
  NProgress.start();
  return config;
});

axios.interceptors.response.use(response => {
  NProgress.done();
  return response;
});