当前位置： 首页 > article >正文

vue实现Nprogress进度条功能

article 2025/2/28 15:24:13

实现效果：

1、安装

NProgress可以通过npm安装

npm install --save nprogress

2、在index.ts中配置

import NProgress from 'nprogress';
import 'nprogress/nprogress.css'

NProgress.configure({
  ease: "ease",
  speed: 500,
})
//路由前置守卫
router.beforeEach((to, from, next) => {
  // console.log(to)
  NProgress.start()
 

})
//路由后置守卫
router.afterEach((to, from) => {
  // console.log(to)
  NProgress.done()
})

http://www.kler.cn/a/502444.html

相关文章：

  • 新版本的IDEA如何解决Git分支显示为警告⚠＜unknown＞的问题
  • Android ValueAnimator根据屏幕刷率动态出帧/刷新，Kotlin
  • NLP中的问答（Question answering）
  • C#中的类型转换以及异常处理--05
  • Python在Excel工作表中创建数据透视表
  • AI Agent：软件测试自动化的新纪元
  • C++中的条件变量（condition_variable）详解：小白版
  • 移动应用安全：保护用户隐私与数据的关键解决方案
  • 安全运营体系建设
  • 字符串 （算法十一）
  • 【8】深入理解 Go 语言中的协程-从基础到高级应用
  • django基于Python对西安市旅游景点的分析与研究
  • 探秘 JMeter （Interleave Controller）交错控制器：解锁性能测试的隐藏密码
  • Go语言之路————func
  • Golang笔记——语言基础知识
  • PyTorch 张量的分块处理介绍
  • 鸿蒙UI开发——带农历的日期滑动选择弹窗
  • 74 mysql having 的实现
  • 数据结构与算法之链表: LeetCode 234. 回文链表 (Ts版)
  • sql server 对 nvarchar 类型的列进行 SUM() 运算