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()
})
相关推荐
vivo互联网技术14 小时前
浅谈 AI 搜索前端打字机效果的实现方案演进
前端·vue·dom
(づど)2 天前
解决VSCode中安装Go环境Gopls失败的问题
vscode·golang
QQRRRRW2 天前
Tailwind+VScode (Vite + React + TypeScript) 原理与实践
vscode·react.js·typescript
_OP_CHEN2 天前
前端开发实战深度解析:(一)认识前端和 HTML 与开发环境的搭建
前端·vscode·html·web开发·前端开发
charlie1145141912 天前
利用WSL + VSCode + ESP-IDF6开发ESP32系列单片机指南
ide·vscode·单片机·esp32·wsl·指南·工程
0欧姆3 天前
VScode 创建 QNX 模板工程
ide·vscode·编辑器
阿波茨的鹅3 天前
VSCode C++ 项目配置教程
c++·ide·vscode
凌晨一点的秃头猪4 天前
VScode 添加远程服务器教程
ide·vscode·编辑器
Hi_kenyon4 天前
使用vim来完全控制你的VSCode(一)
vscode·编辑器·vim
天地之于壹炁兮4 天前
用VSCode打造高效AI开发环境:从配置到实战
ide·人工智能·vscode