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()
})
相关推荐
小妖66612 分钟前
vscode vue文件单行注释失效解决办法
ide·vscode·编辑器
Geek__19921 小时前
VSCode远程图形化GDB
ide·vscode·编辑器
jaywongX2 小时前
Base64编码原理:二进制数据与文本的转换技术
前端·javascript·vue
xx155802862xx4 小时前
vscode 打开csv乱码
ide·vscode·编辑器
明·煜4 小时前
解决VSCode每次SSH连接服务器时,都需要下载vscode-server
ide·vscode·ssh
前端极客探险家6 小时前
前端 Excel 工具组件实战:导入 → 可编辑表格 → 导出 + 样式同步 + 单元格合并
前端·typescript·vue·excel
Magnum Lehar11 小时前
ApophisZerg游戏引擎项目目录展示
人工智能·vscode·编辑器·游戏引擎
敖行客 Allthinker18 小时前
VS Code 智能代理模式:重塑开发体验
vscode·代理模式
PyAIGCMaster20 小时前
Vscode已经打开的python项目,如何使用已经建立的虚拟环境
ide·vscode·python
编程猪猪侠20 小时前
VSCode如何修改默认扩展路径和用户文件夹目录到其他盘以及微信开发工具如何修改扩展路径到其他盘
ide·vscode·编辑器