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()
})
相关推荐
面包狗AI4S9 小时前
Codex/ChatGPT 反复 Reconnecting(正在重新连接) 5/5 的最简修复方法
人工智能·vscode·chatgpt
与自己和解74110 小时前
使用ssh实现 VScode 直连 ubuntu
vscode·ubuntu·ssh
新中地GIS开发老师10 小时前
WebGIS开发入门 | 从 Web 开发到地图开发,差别在哪儿?
前端·vue·webgis
捷瑞电子工坊12 小时前
Ubuntu 下安装 VSCode 和 gcc 的简单步骤
vscode·ubuntu·代码编辑器·安装教程·gcc·deb·snap
sunoo-22912 小时前
【网络编程 + 数据库】select 与 epoll 核心区别详解 + SQLite 入门到 C 接口全攻略
linux·网络·数据库·vscode·学习·sqlite
2501_9151063213 小时前
第一次开发 iPhone App,可能碰到的问题,解决办法
ide·vscode·ios·objective-c·个人开发·swift·敏捷流程
CounterGlew5111 天前
Vscode通过ssh链接autodl云服务器并配置codex
运维·服务器·vscode
谁刺我心2 天前
【vscode问题】远程remote cpptools导致linux板子cpu爆炸问题
ide·vscode·编辑器
进击的蜗牛Eric2 天前
VSCode Server手动安装指南(简洁版)
vscode
JavaEdge.2 天前
scoped 样式与 data-v-* 属性选择器(写给 Javaer)
开发语言·vue