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()
})
相关推荐
非得登录才能看吗?6 小时前
VScode 入门(设置篇)
ide·vscode·编辑器
AlphaFinance10 小时前
Windows下Vscode连接到WSL的方法
ide·vscode·编辑器
Dobby_0510 小时前
【Go】C++ 转 Go 第(二)天:变量、常量、函数与init函数
vscode·golang·go
duandashuaige12 小时前
解决用electron打包Vue工程(Vite)报错electron : Failed to load URL : xxx... with error : ERR _CONNECTION_REFUSED
javascript·typescript·electron·npm·vue·html
java水泥工18 小时前
旅游管理系统|基于SpringBoot和Vue的旅游管理系统(源码+数据库+文档)
spring boot·vue·计算机毕业设计·java毕业设计·旅游管理系统
止观止1 天前
如何开发 VSCode 内置扩展:从零开始构建最简扩展
ide·vscode·编辑器
CHH32131 天前
在 Mac/linux 的 VSCode 中使用Remote-SSH远程连接 Windows
linux·windows·vscode·macos
duansamve1 天前
Vue3与Vue2中使用对比
vue
热爱生活的五柒2 天前
vscode左边打开文件后会覆盖上一个打开的文件,有什么不覆盖的方法
ide·vscode·编辑器
精英的英2 天前
【工具开发】适用于交叉编译环境的QT qmake项目转换vscode项目插件
人工智能·vscode·qt·开源软件