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()
})
相关推荐
切糕师学AI1 天前
使用 VS Code 开发 C# 程序时,如何配置 launch.json
vscode·c#·visual studio code
ys~~1 天前
git学习
git·vscode·python·深度学习·学习·nlp·github
kandee1 天前
vscode混淆js文件的插件用法(jshaman)
javascript·ide·vscode
UVM_ERROR1 天前
Git仓库损坏(Segmentation fault)修复实战:虚拟机环境下UVM项目救援指南
笔记·git·vscode·github·芯片
爱吃土豆的马铃薯ㅤㅤㅤㅤㅤㅤㅤㅤㅤ1 天前
vscode快捷键配置
ide·vscode·编辑器
风为你而吹2 天前
mac m3上使用vscode + esp-idf开发esp32
ide·vscode·macos
爱做白日梦的小猪2 天前
vscode更改文件夹图标显示
vscode
running up2 天前
Pinia 完整使用指南
vue
安_2 天前
<style scoped>跟<style>有什么区别
前端·vue
琢瑜2 天前
VS Code 最下面那一整条蓝色状态栏不见了怎么恢复(Status Bar)状态栏(Status Bar)
vscode