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()
})
相关推荐
F2E_Zhangmo24 分钟前
基于cornerstone3D的dicom影像浏览器 第四章 鼠标实现翻页、放大、移动、窗宽窗位调节
vue·cornerstone·cornerstone3d·cornerstonejs
陈老老老板2 小时前
Visual Studio Code 中为Copilot 添加 Bright Data 的 Web MCP
ide·vscode·copilot
最好结果1 天前
ruoyi系统-vue-elementui 表格单元格点击复制功能实现:实践与问题解决
vue
战南诚1 天前
前端开发vscode插件 - live server
ide·vscode·编辑器
墨抒颖 msy.plus1 天前
[特殊字符] 从零到一:打造你的VSCode圈复杂度分析插件
ide·vscode·编辑器·插件·cursor
北冥有鱼被烹1 天前
【微知】vscode如何开启markdown的review模式?
ide·vscode·编辑器
携欢2 天前
CodeQL(Mac)安装与测试(Visual Studio)简明指南
ide·vscode·macos
叫我阿柒啊2 天前
从Java全栈到前端框架:一次真实的面试对话与技术解析
java·javascript·typescript·vue·springboot·react·前端开发