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()
})
相关推荐
沐墨染1 小时前
Vue实战:自动化研判报告组件的设计与实现
前端·javascript·信息可视化·数据分析·自动化·vue
奔跑的呱呱牛1 小时前
viewer-utils 图片预览工具库
javascript·vue·react
zhanglianzhao2 小时前
Win 11 WSL 配置Claude code 并在VsCode中使用
ide·vscode·编辑器·claude·cladue code
Keying,,,,3 小时前
VScode中终端闪退问题
ide·vscode·编辑器
热爱生活的五柒3 小时前
如何在vscode中使用Claude code以及插件中配置setting.json无效的解决方法
ide·vscode·编辑器
浩瀚之水_csdn5 小时前
vscode中运行html语言
ide·vscode·html
JQLvopkk5 小时前
VSCode基础使用
ide·vscode·编辑器
春日见5 小时前
docker崩溃,闪退,与vscode断开连接
vscode·docker·容器
一个没有本领的人5 小时前
vscode选择了正确的解释器,但终端显示运行的依然为原来的python版本
ide·vscode·python
Cult Of5 小时前
Alicea Wind的个人网站开发日志(1)
python·vue