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()
})
相关推荐
满栀58517 小时前
vue动态路由效果
前端·javascript·vue.js·前端框架·vue
持敬chijing21 小时前
PHP开发-环境搭建-安装phpstudy-vscode工具
开发语言·vscode·php
csdn_aspnet1 天前
Copilot能换成本地吗?VSCode接本地大模型本地化接入方案
ide·vscode·ai·ollama
青 春 记 忆1 天前
零基础入门python04:用注册校验理解字典、集合和条件判断
开发语言·vscode·python·python3.11
碧水澜庭1 天前
头条【vue+fastapi 】全栈教学项目系列之《02_双系统零基础环境搭建手册》
vue·fastapi
00后程序员张1 天前
有没有更轻量的 iOS 开发环境?快蝎kxapp轻量化路径与构成
ide·vscode·ios·objective-c·个人开发·swift·敏捷流程
buhuizhiyuci1 天前
【Linux 网络篇】数据的 “循环系统“:协议认识与网络传输的流程
linux·运维·服务器·网络·vscode
iCxhust3 天前
8088单板机VScode集成开发环境使用方法
ide·笔记·vscode·编辑器·微机原理·8088单板机
如何原谅奋力过但无声3 天前
现代化Python工具:uv、Ruff、Pyright、Rich(只讲重点版)
vscode·python·uv
DsirNg3 天前
从 `@wheel.prevent.stop` 到事件捕获:一次讲清浏览器事件流与 Vue 事件修饰符
javascript·vue·事件修饰符·事件冒泡·dom 事件·事件捕获·wheel