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()
})
相关推荐
WalkingWithTheWind~6 小时前
Linux搭建Nginx直播流媒体服务RTMP/RTSP转Http-flv视频浏览器在线播放/Vue/Java/ffmpeg
java·linux·nginx·ffmpeg·vue·http-flv·rtsp
咖啡虫6 小时前
使用快捷键高效管理 VSCode:提升工作效率,告别鼠标操作
ide·vscode·计算机外设
xuchaoxin13756 小时前
vscode@右键文件夹或文件vscode打开一键配置
vscode·编辑器
Lucky小黄人8 小时前
利用 vscode 进行远程开发
ide·vscode·编辑器
Tipriest_19 小时前
vscode settings(二):文件资源管理器&编辑功能&主题&快捷键
ide·vscode·编辑器
汤永红1 天前
在VSCode中接入deepseek
vscode·html·deepseek
一个处女座的程序猿O(∩_∩)O1 天前
《深入探索Vben框架:使用经验与心得分享》
vue
Hylan_J1 天前
【VSCode】MicroPython环境配置
ide·vscode·python·编辑器
mcusun20001 天前
VScode 使用Deepseek又方便又好用的另一款插件
ide·vscode·编辑器·deepseek
luoyayun3611 天前
Trae+Qt+MSVC环境配置
vscode·qt·环境配置·trae qt