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()
})
相关推荐
钛态19 小时前
前端安全防线:CSRF 攻击链路与双重 Token 校验的工程实现
前端·vue·react·web
zhz52141 天前
GIS项目中空间参考转换与MBTiles偏移:问题成因、解法与避坑
python·vue·gis
钛态1 天前
AI 组件生成评测:别只看页面能不能渲染
前端·vue·react·web
热爱生活的五柒1 天前
如何快速删除vscode项目下所有的http链接
ide·vscode·编辑器
lbb 小魔仙1 天前
从零搭建Python开发环境:Python安装 + VSCode + PyCharm 完整配置指南
vscode·python·pycharm
Lary_Rock2 天前
MTK SecureBoot全链路配置指南
前端·vscode·github
万亿少女的梦1682 天前
基于Spring Boot、Vue与MySQL的高校实习信息管理系统设计与实现
spring boot·mysql·vue·权限管理·restful api
天空'之城2 天前
VS Code Git 工作树:告别频繁切分支,实现多分支并行开发实战方案
git·vscode·版本控制·嵌入式开发·开发效率·worktree·多分支管理
AM艾玛2 天前
Flutter 环境搭建实录
vscode·flutter
程序员爱德华2 天前
VSCode git/gerrit解冲突
git·vscode·gerrit