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()
})
相关推荐
CAE虚拟与现实2 天前
VSCode中的下载VSIX是指什么?
ide·vscode·编辑器
蜚鸣2 天前
Vue的快速入门
vue
路边闲人22 天前
vscode启用GEMINI CODE ASSIST插件
ide·vscode·gemini
CAE虚拟与现实2 天前
VSCode官方汉化包
ide·vscode·编辑器·vscode汉化
CAE虚拟与现实2 天前
VSCode创建Python项目和运行py文件
ide·vscode·编辑器
Stardep2 天前
ssh远程连接服务器到vscode上“连接失败”
服务器·vscode·ssh
superior tigre3 天前
1.linux环境配置+ssh远程连接vscode调试(问题:无法联网,无法共享粘贴板,不满足运行vscode服务器的先决条件)
linux·服务器·vscode
老黄编程3 天前
VSCode 的百度 AI编程插件
ide·vscode·ai编程
老黄编程3 天前
VSCode AI编程插件
ide·vscode·ai编程
Naiva3 天前
ESP32-C3 入门09:基于 ESP-IDF + LVGL + ST7789 的 1.54寸 WiFi 时钟(SquareLine Studio 移植)
ide·笔记·vscode