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()
})
相关推荐
海市公约5 小时前
HTML网页开发从入门到精通:从标签到表单的完整指南
前端·ide·vscode·程序人生·架构·前端框架·html
Irene19919 小时前
VSCode 内置终端 和 系统自带终端 的主要区别
windows·vscode·终端
weixin_4046793117 小时前
vscode内存过大
ide·vscode·编辑器
悟能不能悟18 小时前
浏览器执行刷新,都经历过什么阶段
vue
七元权19 小时前
VSCode连接远程容器失败(Missing GLIBC >=2.28!)
ide·vscode·编辑器·连接容器
信奥胡老师1 天前
苹果电脑(mac系统)安装vscode与配置c++环境,并可以使用万能头文件全流程
c++·ide·vscode·macos·编辑器
奔跑吧 android1 天前
【vscode】【远程 ssh 开发】【环境搭建】
ide·vscode·ssh
是梦终空1 天前
计算机毕业设计248—基于Java+Springboot+vue的博物馆预约系统(源代码+数据库+开发文档)
java·spring boot·vue·毕业设计·jwt·博物馆预约系统·博物馆网站
@AfeiyuO2 天前
Vue 全局引用iconfon
vue
还有你Y2 天前
VScode远程连接docker容器教程
ide·vscode·docker