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()
})
相关推荐
不修×蝙蝠7 小时前
vue(七) vue进阶
前端·javascript·vue.js·前端框架·vue·ssm·进阶
迷路爸爸18014 小时前
(经过验证)在 Ubuntu 系统中为 VSCode、PyCharm 终端及 Jupyter Notebook 配置代理的完整方案
vscode·ubuntu·pycharm·proxy·代理·代理配置·终端代理配置
Coding Happily15 小时前
VScode 配置 C语言环境
c语言·ide·vscode
丘狸尾15 小时前
vscode 极简Linux下 cmake c++开发环境
linux·c++·vscode
纪伊路上盛名在16 小时前
用vscode写latex-1
ide·笔记·vscode·编辑器·知识图谱·学习方法
HZWANG3018 小时前
在VSCode中设置bash命令行内容简写
vscode·bash
小阳生煎1 天前
播放音频文件同步音频文本
vue·音视频
水星记_1 天前
vue 与 vue-json-viewer 实现 JSON 数据可视化
前端·vue
汤姆yu1 天前
基于Android的校园自助打印系统的设计与实现
android·java·spring boot·后端·vue