vue实现Nprogress进度条功能

实现效果:

1、安装

NProgress可以通过npm安装

npm install --save nprogress

2、在index.ts中配置

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

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

})
//路由后置守卫
router.afterEach((to, from) => {
  // console.log(to)
  NProgress.done()
})
相关推荐
千寻技术帮12 小时前
10422_基于Springboot的教务管理系统
java·spring boot·后端·vue·教务管理
ygqygq214 小时前
让 AI 编程助手更智能:Turbo AI Rules 扩展使用指南
vscode·ai·扩展·rules
是梦终空15 小时前
计算机毕业设计260—基于Springboot+Vue3+Ai对话的非遗传承管理系统(源代码+数据库+2万字论文)
spring boot·vue·毕业设计·课程设计·毕业论文·ai对话·非遗传承管理系统
PascalMing1 天前
Pascal.Edge物联网平台:生产企业设备数据采集与管理解决方案
物联网·c#·vue·数据采集
狂放不羁霸1 天前
VSCode | 设置保存时自动格式化 Python 文件
ide·vscode·python
hopsky1 天前
智能编程Cline在vscode 中的使用技巧
ide·vscode·编辑器
无脑学c++1 天前
Windows 上使用 VSCode + SDCC 开发 51 单片机完整教程
vscode·单片机·嵌入式
逍遥_xiaoyao1 天前
Vscode 配置教程
ide·vscode·编辑器
差点GDP1 天前
新版VSCODE无法远程连接Linux服务器
vscode
wabil1 天前
VSCode远程调试Linux的GUI程序
linux·ide·vscode