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()
})
相关推荐
阿桂有点桂2 小时前
C#使用VS软件打包msi安装包
windows·vscode·c#
foxsen_xia7 小时前
Go安装、配置和vsCode配置Go
开发语言·vscode·golang
IT教程资源D12 小时前
[N_129]基于springboot,vue学生宿舍管理系统
mysql·vue·前后端分离·springboot宿舍·宿舍管理系统
UVM_ERROR13 小时前
硅农VSCode 插件推荐
vscode·centos·ssh
十点摆码14 小时前
使用 Jenkins + Gitee + Node 自动化部署 Vue
gitee·node.js·自动化·vue·jenkins
x***440115 小时前
vscode配置django环境并创建django项目(全图文操作)
vscode·django·sqlite
Xiaok101816 小时前
VSCode 报错 “No module named ‘torch‘“
ide·vscode·编辑器
阿桂有点桂16 小时前
Flutter使用VS Code打包app
vscode·flutter·安卓
大江东去浪淘尽千古风流人物16 小时前
【MSCKF】StateHelper 学习备注
vscode·学习·性能优化·编辑器·dsp开发
&&Citrus1 天前
【杂谈】SNNU公共计算平台:深度学习服务器配置与远程开发指北
服务器·人工智能·vscode·深度学习·snnu