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()
})
相关推荐
学历真的很重要4 小时前
VsCode+Roo Code+Gemini 2.5 Pro+Gemini Balance AI辅助编程环境搭建(理论上通过多个Api Key负载均衡达到无限免费Gemini 2.5 Pro)
前端·人工智能·vscode·后端·语言模型·负载均衡·ai编程
程序员小寒12 小时前
VSCode有哪些好用的插件和快捷键?
ide·vscode·编辑器
Byron Loong15 小时前
【Debug】vscode 调试python,如何配置固定调试文件
ide·vscode·python
电子_咸鱼15 小时前
【QT SDK 下载安装步骤详解 + QT Creator 导航栏使用教程】
服务器·开发语言·网络·windows·vscode·qt·visual studio code
HealthScience18 小时前
vscode通过跳板机连接到服务器
服务器·ide·vscode
海市公约1 天前
HTML网页开发从入门到精通:从标签到表单的完整指南
前端·ide·vscode·程序人生·架构·前端框架·html
Irene19911 天前
VSCode 内置终端 和 系统自带终端 的主要区别
windows·vscode·终端
weixin_404679312 天前
vscode内存过大
ide·vscode·编辑器
悟能不能悟2 天前
浏览器执行刷新,都经历过什么阶段
vue
七元权2 天前
VSCode连接远程容器失败(Missing GLIBC >=2.28!)
ide·vscode·编辑器·连接容器