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)

相关推荐
巴巴_羊几秒前
React Ref使用
前端·javascript·react.js
拾光拾趣录21 分钟前
CSS常见问题深度解析与解决方案(第三波)
前端·css
徊忆羽菲28 分钟前
Echarts3D柱状图-圆柱体-文字在柱体上垂直显示的实现方法
javascript·ecmascript·echarts
轻语呢喃38 分钟前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端
杨进军39 分钟前
React 协调器 render 阶段
前端·react.js·前端框架
中微子42 分钟前
Blob 对象及 Base64 转换指南
前端
风铃喵游42 分钟前
让大模型调用MCP服务变得超级简单
前端·人工智能
markyankee10143 分钟前
Vue 响应式系统全面解析:从基础到高级实践
vue.js
中微子43 分钟前
智能前端实践之 shot-word demo
前端
归于尽44 分钟前
智能前端小魔术,让图片开口说单词
前端·react.js