Vue项目增加路由跳转全局进度条 NProgress.js

GitHub:rstacruz/nprogress: For slim progress bars like on YouTube, Medium, etc (github.com)

NProgress.js 的用法非常简单 引入后只需在路由守卫中稍加配置即可

1. 安装

亦可使用yarn npm等方式安装 这里以pnpm安装举例

复制代码
pnpm install --save nprogress

2. 引入使用

在路由文件内 进行如下操作

复制代码
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'


router.beforeEach((to, from, next) => {
  NProgress.start() // 显示进度条
  next()
})

router.afterEach(() => {
  NProgress.done() // 完成进度条
})

3. 个性化配置

复制代码
NProgress.configure({     
    easing: 'ease',  // 动画方式    
    speed: 500,  // 递增进度条的速度    
    showSpinner: false, // 是否显示加载ico    
    trickleSpeed: 200, // 自动递增间隔    
    minimum: 0.3 // 初始化时的最小百分比
})

其他高阶用法请参考如下文章

Vue2中级指南-05 Vue中路由跳的转进度条和数据加载Loading显示 - 掘金 (juejin.cn)

相关推荐
俩毛豆6 分钟前
【图片】【编缉】图片增加水印(通过组件的Overlay方法增加水印)
前端·harmonyos
gustt6 分钟前
JS 变量那些坑:从 var 到 let/const 的终极解密
前端·javascript
出师未捷的小白6 分钟前
[NestJS] 手摸手~工作队列模式的邮件模块解析以及grpc调用
前端·后端
十年_H9 分钟前
Cesium自定义着色器-模式
javascript·cesium
shuaijie051818 分钟前
表格单元格输入框转换-其一
javascript·elementui
Z_B_L22 分钟前
问题记录--elementui中el-form初始化表单resetFields()方法使用时出现的问题
前端·javascript·vue.js·elementui·1024程序员节
袁煦丞26 分钟前
PandaWiki开源知识库系统破解内网限制:cpolar内网穿透实验室第616个成功挑战
前端·程序员·远程工作
golang学习记26 分钟前
Next.js MCP Server 实战指南:让 AI 编程助手真正“懂”你的应用
前端
柳鲲鹏35 分钟前
多种方法:OpenCV中修改像素RGB值
前端·javascript·opencv·1024程序员节
susu108301891135 分钟前
chrome浏览器设置为手机模式
前端·chrome