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()
})
相关推荐
汝生淮南吾在北3 小时前
SpringBoot3+Vue3小区物业报修系统+微信小程序
微信小程序·小程序·vue·毕业设计·springboot·课程设计·毕设
苏打水com5 小时前
第十九篇:Day55-57 前端工程化进阶——从“手动低效”到“工程化高效”(对标职场“规模化”需求)
前端·css·vue·html
十月不到底6 小时前
vue3手机端列表加载组件
前端·vue
啃火龙果的兔子7 小时前
Codeium如何在vscode中使用
ide·vscode·编辑器
一笑code8 小时前
pycharm vs vscode安装python的插件
vscode·python·pycharm
@AfeiyuO8 小时前
Vue3 热力图
vue·echarts
_OP_CHEN8 小时前
用极狐 CodeRider-Kilo 开发俄罗斯方块:AI 辅助编程的沉浸式体验
人工智能·vscode·python·ai编程·ai编程插件·coderider-kilo
IT教程资源D10 小时前
[N_115]基于springboot,vue教务管理系统
mysql·vue·前后端分离·springboot教务系统
lovingsoft11 小时前
Vscode 与 jetbrains
ide·vscode·编辑器
嘿siri11 小时前
uniapp enter回车键不触发消息发送,已解决
前端·前端框架·uni-app·vue