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()
})
相关推荐
Peter·Pan爱编程39 分钟前
VSCode Remote-SSH 的使用以及连接失败(Bad permissions)完整排错指南
vscode·ubuntu·ssh
吴老弟i1 小时前
基于 VSCode 实现 Python 开发与调试 | 环境配置搭建 | PIP Anaconda
vscode·python·pip
向上的车轮2 小时前
VSCode宣布改名“开源AI编辑器”
vscode·开源·编辑器
yuanmenghao3 小时前
自动驾驶中间件iceoryx - 内存与 Chunk 管理(一)
c++·vscode·算法·链表·中间件·自动驾驶·柔性数组
胡斌附体13 小时前
vue打包测试环境
vue·打包·build·test·env环境文件
yyt3630458411 天前
K 线图高性能窗口化渲染
前端·javascript·css·vue.js·gitee·vue
小小荧1 天前
VSCode 推出绿色版!更强!更智能!
ide·vscode·编辑器
天天开心a1 天前
【Vue错误修复】Vue模块居中问题
java·前端·javascript·vue.js·前端框架·vue
酷飞飞1 天前
使用 WSL + VSCode 搭建 ESP32/ESP32-S2 开发环境(2026 最新版)
ide·vscode·编辑器
勤奋的小米蜂1 天前
vscode 自带终端无法正常执行例如npm命令---解决办法
前端·vue.js·vscode·npm