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()
})
相关推荐
不会写DN43 分钟前
Vue3中的computed 与 watch 的区别
javascript·面试·vue
ZXF_H2 小时前
VSCode C/C++函数Ctrl+鼠标点击无法跳转的解决方法
c++·ide·vscode
钛态4 小时前
前端WebSocket实时通信:别再用轮询了!
前端·vue·react·web
zhangfeng11335 小时前
vscode 之类的编辑器 ,跳转到某一个函数 方法 是什么快捷键 this->getEbayReturns($shop);
ide·vscode·编辑器
ShawnLiaoking5 小时前
vscode 配置环境
ide·vscode·编辑器
蓝黑20205 小时前
Vue组件通信之slot
前端·javascript·vue
弈风千秋万古愁5 小时前
vscode使用markdown+plantuml
vscode·markdown·plantuml
日更嵌入式的打工仔7 小时前
Visual Studio 与 Visual Studio Code 区别
ide·vscode
蓝黑202017 小时前
Vue的 value=“1“ 和 :value=“1“ 有什么区别
前端·javascript·vue
时光之源1 天前
Labelme安装及使用说明教程
vscode·数据集·cursor·labelme·数据标注