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()
})
相关推荐
学嵌入式的小杨同学29 分钟前
【Linux 封神之路】进程进阶实战:fork/vfork/exec 函数族 + 作业实现(含僵尸进程解决方案)
linux·开发语言·vscode·嵌入式硬件·vim·软件工程·ux
IT北辰2 小时前
基于Vue3+python+mysql8.0的财务凭证录入系统,前后端分离完整版(可赠送源码)
python·vue
一路向北North4 小时前
vscode 安装插件非常慢
ide·vscode·编辑器
小乔的编程内容分享站5 小时前
C语言函数的声明和定义(文章包括当VScode中含多个.c文件且含.h文件如何同时编译
c语言·开发语言·vscode
怣疯knight5 小时前
vscode的md文件显示memaid图
vscode
小乔的编程内容分享站18 小时前
记录使用VSCode调试含scanf()的C语言程序出现的两个问题
c语言·开发语言·笔记·vscode
mancy_1212121 天前
复古C语言代码复活!——以121+hello.c为例摘要
c语言·vscode·gitee·visual studio·新人首发·turbo c
IT教程资源D1 天前
[N_160]基于springboot,vue校园论坛系统
mysql·vue·前后端分离·springboot校园论坛·校园论坛交流系统
liu_bees1 天前
微信小程序Canvas生成图片失败:canvas is empty问题解析
微信小程序·小程序·uni-app·vue
qq_397562311 天前
使用vscode , 开发keil单片机工程 . (为了使用ai助手)
ide·vscode·编辑器