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()
})
相关推荐
嵌入式学习菌18 小时前
vscode配置ESP32-idf存在的问题
ide·vscode·编辑器
水木姚姚18 小时前
搭建 TensorFlow 在 VScode 下编程环境(Debian)
人工智能·windows·vscode·debian·tensorflow
@AfeiyuO19 小时前
封装ElementPlusIcons图标和系统应用内置图片为应用图标
vue
JELEE.19 小时前
Vue3复习笔记
vue.js·笔记·vue
猫猫的小茶馆19 小时前
【ARM】VSCode和IAR工程创建
c语言·开发语言·arm开发·ide·vscode·stm32·嵌入式硬件
zgj_online19 小时前
vscode的zsh终端,conda切换node环境不成功的解决方案
ide·vscode·conda
问问计算机19 小时前
vscode analyzing... and its dependencies 耗时过长问题
vscode·编辑器
zephyr_zeng19 小时前
CubeMX项目轻松导入Vscode+EIDE编译
c语言·ide·vscode·stm32·mcu·物联网·编辑器
ziyue757520 小时前
vscode和idea配置shfmt格式化shell脚本
ide·vscode·编辑器
OliverH-yishuihan20 小时前
Windows上VScode编译C++
c++·vscode