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()
})
相关推荐
i紸定i7 小时前
解决html-to-image在 ios 上dom里面的图片不显示出来
前端·ios·vue·html·html-to-image
谱写秋天7 小时前
Qt 5.5 的安装与配置(使用 VSCode编辑)
开发语言·vscode·qt
骑着毛驴数星星20 小时前
CANDB++中的CAN_DBC快速编辑方法,使用文本编辑器(如notepad++和VScode)
vscode·can
weixin_307779131 天前
VS Code配置MinGW64编译Ipopt库
开发语言·c++·vscode·算法
weixin_307779131 天前
VS Code配置MinGW64编译backward库
开发语言·c++·vscode·算法
QL.ql2 天前
vscode的ws环境,esp32s3连接wifi
ide·vscode·编辑器
尚学教辅学习资料2 天前
Vue3从入门到精通: 4.5 数据持久化与同步策略深度解析
vue·数据持久化
Hyvial2 天前
VsCode 使用指南(配置 + 美化)
vscode
十秒耿直拆包选手2 天前
IDE:vscode的vue3模板
javascript·ide·vscode
IT毕设实战小研2 天前
Java毕业设计选题推荐 |基于SpringBoot的健身爱好线上互动与打卡社交平台系统 互动打卡小程序系统
java·开发语言·vue.js·spring boot·vue·毕业设计·课程设计