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()
})
相关推荐
2501_915918419 小时前
在 Xcode 中运行和调试单元测试的完整指南
ide·vscode·macos·ios·单元测试·个人开发·xcode
面壁的熊猫9 小时前
工作和学习中的高效工具
vscode
不爱吃鱼的蔓热莓1 天前
释放VSCode插件占用系统盘垃圾
ide·vscode·编辑器
2501_915106321 天前
iOS开发之Xcode常用调试技巧总结
ide·vscode·ios·objective-c·个人开发·swift·敏捷流程
冒险的豆子1 天前
Vue2 、Vue3 响应式对比及优劣
vue
bing_feilong1 天前
vscode: ssh Got bad result from install script
ide·vscode·ssh
沫璃染墨2 天前
从零入门计算机网络系列(五):UDP套接字编程实战——从核心API到客户端与服务器通信
linux·网络·c++·vscode·网络协议·udp
NetX行者2 天前
用 Vite + Vue3 + UnoCSS 搭建企业级项目模板(一):基础骨架
vue·vite·unocss
程序员龙一2 天前
VsCode+ClaudeCode+Deepseek的配置
vscode·claude·deepseek·vibecoding
java水泥工2 天前
什么是前端
java·vue·html5