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()
})
相关推荐
jay神9 小时前
基于团队模式的C程序设计课程辅助教学管理系统
java·spring boot·vue·web开发·管理系统
钛态9 小时前
前端TypeScript高级技巧:让你的代码更安全
前端·vue·react·web
千码君201611 小时前
flutter: 分享一下基于trae cn 构建的过程
java·vscode·flutter·kotlin·trae
我才是一卓11 小时前
2026 Python 入门教程,结合 vscode 和 miniforge/miniconda
开发语言·vscode·python
lzl204012 小时前
VSCode中Codex CLI登录卡在‘Sign in with ChatGPT‘屏幕
ide·vscode·chatgpt·codex
SkyXZ~13 小时前
Mac上使用VScode优雅开发STM32
vscode·stm32·macos
xskukuku1 天前
VSCode中的Codex插件如何调用第三方API
vscode·ai·codex
lijfrank1 天前
MacOS 下 VS Code + LaTeX + Skim 双向同步配置
vscode·macos·pdf·latex·mactex
AI进化营-智能译站1 天前
Jazzy ROS2入门指南系列05-配置VsCode实现ROS2项目开发
ide·vscode·ai·编辑器
时光之源1 天前
Visual Studio | Marketplace创建发布者(Create Publisher)时无法创建的问题解决方案
ide·vscode·visual studio·plugin·cursor