vue nprogress进度条插件介绍

实现效果如下:
在这里插入图片描述

安装: npm install –save nprogress

用法:

//vue中引用
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
//方法
NProgress.start() - 显示进度条
NProgress.set(0.4) - 设置百分比
NProgress.inc() - 稍微增加
NProgress.done() - 完成进度(进度条消失)

vue 中使用:在路由中添加:

//登录前
router.beforeEach((to, from, next) => {
	NProgress.start();
	if (to.path == '/login') {
		sessionStorage.removeItem('user');
	}
	let user = JSON.parse(sessionStorage.getItem('user'));
	if (!user && to.path != '/login') {
		next({
			path: '/login'
		})
	} else {
		next()
	}
})
 
 
//登录后
router.afterEach(transition => {
	NProgress.done();
});

我们在 require.js 中引用,在ajax请求前后添加

//对于axios进行二次封装
import axios from "axios";

//start: 进度条开始 done: 进度条结束
import nprogress from "nprogress";
//如果出现进度条没有显示:一定是你忘记了引入样式了
import "nprogress/nprogress.css";
//底下的代码也是创建axios实例
let requests = axios.create({
  //基础路径
  baseURL: "/api",
  //请求不能超过5S
  timeout: 5000,
});

//请求拦截器----在项目中发请求(请求没有发出去)可以做一些事情
requests.interceptors.request.use((config) => {
  //现在的问题是config是什么?配置对象
  //可以让进度条开始动
  nprogress.start();
  return config;
});

//响应拦截器----当服务器手动请求之后,做出响应(相应成功)会执行的
requests.interceptors.response.use(
  (res) => {
    //进度条结束
    nprogress.done();
    //相应成功做的事情
    return res.data;
  },
  (err) => {
    alert("服务器响应数据失败");
  }
);
//最终需要对外暴露(不对外暴露外面模块没办法使用)
//这里的代码是暴露一个axios实例
export default requests;

怎样修改进度条颜色??

找到 nprogress.css 文件中的样式

在这里插入图片描述

### 关于 NProgress 进度条卡死的原因分析 NProgress 是一款轻量级的页面加载进度条插件,通常用于 Vue 或其他前端框架中展示页面切换时的加载状态。如果发现 NProgress进度条出现卡死现象,可能是由于以下几个原因: 1. **`router.beforeEach()` 配置错误** 如果在 `router.beforeEach()` 中未正确调用 `next()` 方法或者存在逻辑上的死循环,则可能导致路由无法正常推进,从而使得 NProgress 的 `start()` 被多次触发而缺少对应的 `done()`。 2. **异步操作未完成即调用 `done()`** 当某些异步请求尚未完成时提前调用了 `NProgress.done()`,可能会导致进度条显示异常甚至卡住。 3. **CSS 文件未正确引入** 若未成功加载 `nprogress.css` 样式文件,虽然不会直接影响功能实现,但可能引发视觉上的卡顿感[^1]。 --- ### 解决方案 #### 一、确保 `router.beforeEach()` 正确配置 以下是经过优化的 `router.beforeEach()` 实现方法,能够有效避免因逻辑问题引起的死循环或卡死情况: ```javascript router.beforeEach((to, from, next) => { // 开始加载动画 NProgress.start(); if (localStorage.getItem('userInfo')) { // 已登录用户处理 if (to.path === '/login') { next({ path: '/' }); // 登录状态下访问登录页则重定向至主页 } else { next(); // 继续导航到目标路径 } } else { // 未登录用户处理 if (to.path !== '/login') { next('/login'); // 未登录情况下强制跳转至登录页 } else { next(); // 访问登录页时不作额外拦截 } } // 注意:此处无需再次显式调用 next() }); ``` 此代码片段通过严格判断当前用户的登录状态以及目标路径是否合法,防止重复触发路由钩子函数而导致死循环发生[^3]。 --- #### 二、合理安排 `NProgress.done()` 执行时机 为了保证每次路由变化都能顺利完成加载动画,在 `router.afterEach()` 中统一设置 `NProgress.done()` 更加稳妥: ```javascript router.afterEach(() => { setTimeout(() => { NProgress.done(); }, 500); // 延迟半秒执行以模拟实际数据加载时间 }); ``` 这里加入了一个短延时(可根据需求调整),以便让用户体验更加流畅自然[^1]。 --- #### 三、确认资源加载无误 务必验证以下两点: - 是否已在入口文件中正确定义并导入了 `NProgress` 及其配套 CSS 文件; - 浏览器开发者工具网络面板下是否存在关于这些静态资源加载失败的情况。 示例代码如下所示: ```javascript import NProgress from 'nprogress'; import 'nprogress/nprogress.css'; // 初始化简单参数配置 NProgress.configure({ easing: 'ease', speed: 500, showSpinner: false }); ``` 以上步骤可以最大限度降低因外部依赖缺失所造成的潜在风险。 --- ### 总结 综上所述,针对 NProgress 进度条卡死的问题主要集中在三个方面——路由守卫逻辑设计不当、动画结束条件设定不合理以及必要样式未能加载完全。通过对上述内容逐一排查修正即可彻底解决问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

半夏_2021

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值