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()
})
相关推荐
普通网友17 小时前
远程配置 VsCode:Github Copilot 安装成功却无法使用?细节避坑
vscode·github·copilot
lucky九年17 小时前
Treasure vscode插件
ide·vscode·编辑器
换日线°1 天前
微信小程序对接位置服务(腾讯、高德)完成路径规划
前端·微信小程序·vue
攻城狮7号2 天前
不懂代码也能造?TRAE+GLM-4.6 手把手教你搭心理咨询智能客服小程序
python·小程序·uni-app·vue·trae·glm我的编程搭子·glm-4.6
@AfeiyuO2 天前
Vue 引入全局样式scss
前端·vue·scss
在线OJ的阿川2 天前
vscode远程连接服务器:解决Got bad result from install script
服务器·ide·vscode·个人开发
学嵌入式的小杨同学2 天前
【嵌入式 C 语言高频考点】周测 + 期中真题解析:从基础语法到编程实战
c语言·数据结构·数据库·vscode·算法·面试
26岁的学习随笔2 天前
解决 Claude Code VS Code 扩展在 Windows 上无法检测 Git Bash 的问题
vscode·claude code·git-bash
南草徽2 天前
vscode小技巧预览-返回到上一级文件夹
ide·vscode·编辑器