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()
})
相关推荐
汽车软件工程师0014 小时前
vscode使用ctrl+shift +F无法搜索此变量,怎么破解?
ide·vscode·编辑器
小坏坏的大世界6 小时前
VSCode 配置 ROS2 Launch 调试环境(Attach 方式)
ide·vscode·编辑器
纯.Pure_Jin(g)6 小时前
【Python练习四】Python 算法与进阶特性实战:数组、序列化与位运算专项练习(3道经典练习带你巩固基础——看完包会)
开发语言·vscode·python
云小逸9 小时前
【Vscode插件开发教程】VSCode插件开发入门指南:从C++开发者的视角
c++·ide·vscode
集成显卡10 小时前
前端视频播放方案选型:主流 Web 播放器对比 + Vue3 实战
前端·vue·音视频
克里斯蒂亚诺·罗纳尔达10 小时前
vue页面加载时间过长优化
vue
周小天..10 小时前
cmake+vscode+cuda的使用(windows)
ide·vscode·编辑器
YanaDH11 小时前
前端开发新机环境部署(带链接)
git·vscode·npm·node.js
纯.Pure_Jin(g)11 小时前
【Python练习五】Python 正则与网络爬虫实战:专项练习(2道经典练习带你巩固基础——看完包会)
开发语言·vscode·python
草根大哥12 小时前
AI编程实践-homex物业管理平台(Go + Vue3 + MySQL 多租户落地)
mysql·golang·vue·ai编程·gin·物业管理系统·多租户