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()
})
相关推荐
callJJ31 分钟前
MCP配置与实战:深入理解现代开发工具链
javascript·node.js·vue·mcp·windsurf
OpenMiniServer1 小时前
AI + GitLab + VSCode:下一代开发工作流的革命性集成
人工智能·vscode·gitlab
dust_and_stars2 小时前
ubuntu24 安装vscode
ide·vscode·编辑器
Destiny_where3 小时前
Claude VSCode插件版接入强大的GLM(无需登录注册claude code)
ide·人工智能·vscode·编辑器·claude code
shejizuopin3 小时前
基于JavaSSM+MySQL的实验室考勤管理系统设计与实现
java·mysql·vue·毕业设计·论文·springboot·实验室考勤管理系统设计与实现
__雨夜星辰__3 小时前
VScode免密远程连接到Ubuntu(VMware17环境)虚拟机
ide·vscode·ubuntu
痞老板24 小时前
【Cmder】VSCode设置Cmder为内置终端
ide·vscode·编辑器
Albert Edison4 小时前
【Git】多人协作一(同一分支下)
git·vscode·svn·github
__雨夜星辰__4 小时前
VS Code 的Remote-SSH/Remote Development插件无法连接到 Ubuntu 系统下 的远程虚拟主机(VMware)
运维·vscode·ubuntu·ssh
风静如云4 小时前
VSCode:SSH后无法使用c0pil0t
vscode