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()
})
相关推荐
rainFFrain7 小时前
单例模式与线程安全
linux·运维·服务器·vscode·单例模式
suanday_sunny13 小时前
VSCode运行,各类操作缓慢,如何清理
ide·vscode·编辑器
信计小白13 小时前
vscode报Module containing this breakpoint has not yet loaded
ide·vscode·编辑器
跟着珅聪学java16 小时前
spring boot +Elment UI 上传文件教程
java·spring boot·后端·ui·elementui·vue
杉之21 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
MonkeyKing_sunyuhua1 天前
Visual Studio Code 进行汉化
ide·vscode·编辑器
沫夕残雪1 天前
HTTP,请求响应报头,以及抓包工具的讨论
网络·vscode·网络协议·http
还是鼠鼠1 天前
Node.js全局生效的中间件
javascript·vscode·中间件·node.js·json·express
苏克贝塔1 天前
CMake学习--Window下VSCode 中 CMake C++ 代码调试操作方法
c++·vscode·学习
剑亦未配妥1 天前
Vue2函数式组件实战:手写可调用的动态组件,适用于toast轻提示、tip提示、dialog弹窗等
前端·vue.js·vue