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()
})
相关推荐
monsion8 小时前
OpenCode 学习指南
人工智能·vscode·架构
非鱼䲆鱻䲜10 小时前
vscode开发stm32添加新的头文件路径和包含源文件
ide·vscode·stm32·cmake·包含头文件·包含源文件
liurunlin88813 小时前
Go环境搭建(vscode调试)
开发语言·vscode·golang
Willliam_william18 小时前
QEMU学习之路(11)— 使用VSCode调试qemu-system-riscv64
ide·vscode·学习
TroubleMakerQi19 小时前
[虚拟机环境配置]07_Ubuntu中安装vscode教程
linux·人工智能·vscode·ubuntu
zhensherlock20 小时前
Protocol Launcher 系列:Trae AI 编辑器的深度集成
javascript·人工智能·vscode·ai·typescript·编辑器·ai编程
木斯佳1 天前
前端八股文面经大全:阿里云AI应用开发二面(2026-03-21)·面经深度解析
前端·css·人工智能·阿里云·ai·面试·vue
不解不惑1 天前
MacOS系统ssh和ftp,使用vscode实现
vscode·macos·ssh
π同学1 天前
ESP-IDF+vscode开发ESP32第二讲——console
vscode·esp32·console
计算机安禾2 天前
【C语言程序设计】第35篇:文件的打开、关闭与读写操作
c语言·开发语言·c++·vscode·算法·visual studio code·visual studio