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()
})
相关推荐
csdn_aspnet10 小时前
如何在 Visual Studio Code 中使用 Cursor AI
vscode·cursor
zpjing~.~14 小时前
VSCODE 选中多行 需要同时按住alt键才可以
ide·vscode·编辑器
HealthScience14 小时前
vscode/cursor怎么自定义文字、行高、颜色(settings.json)
ide·vscode·编辑器
Despacito0o15 小时前
ESP32S3+VSCode+PlatformIO+Arduino+Freertos开发入门指南:基于Arduino框架的应用开发全流程
ide·vscode·编辑器
xaboy18 小时前
Vue 开源项目低代码表单设计器 FcDesigner v3.3 版本发布!兼容Element Plus/Ant Design/Vant,支持PC/移动端
低代码·vue·表单设计器
程序猿小D18 小时前
[附源码+数据库+毕业论文]基于Spring+MyBatis+MySQL+Maven+vue实现的酒店预订管理系统,推荐!
数据库·mysql·spring·vue·毕业设计·mybatis·酒店预订
不想起名字呢19 小时前
Vscode 下载远程服务器失败解决方法
ide·vscode·编辑器
马卡龙MK19 小时前
vue 不完美的多标签页解决方案
vue
liujing1023292921 小时前
vscode里面怎么配置ssh步骤
ide·vscode·编辑器
那个指针是空的?1 天前
配置使用SSH与VScode进行连接
vscode·编辑器