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()
})
相关推荐
!win !20 分钟前
通过重写组件轻松掌握用JSX写Vue项目
vue·jsx
mrsyf3 小时前
VSCode中Copilot的询问、编辑、代理有啥区别?
ide·vscode·copilot
lxmyzzs10 小时前
vscode-ssh无法进入docker问题解决
vscode·docker·ssh
Candice_jy11 小时前
vscode运行ipynb文件:使用docker中的虚拟环境
服务器·ide·vscode·python·docker·容器·编辑器
不染尘.12 小时前
2025_11_5_刷题
开发语言·c++·vscode·算法·贪心算法·动态规划
willhuo20 小时前
vscode编辑arduino项目
ide·vscode·编辑器
York·Zhang20 小时前
VSCode 插件开发完整指南:从零到发布
ide·vscode·node.js·编辑器
zy happy1 天前
RuoyiApp 在vuex,state存储nickname vue2
前端·javascript·小程序·uni-app·vue·ruoyi
小阳生煎1 天前
Vue实现全局设置一个刷新按钮 只刷新当面路由页面 不跳转操作功能
vue.js·vue