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()
})
相关推荐
sunshine_程序媛3 小时前
在Vue2项目中引入ElementUI详细步骤
前端·ui·elementui·前端框架·vue
努力了吗梁同学5 小时前
Nuxt3 中使用 pnpm 安装的 NuxtImg 使用会提示找不到图片
前端·vue·pnpm·nuxt·nuxtimg
Fighting_19976 小时前
VSCode占C盘内存太大,如何处理
c语言·ide·vscode
sg_knight7 小时前
Rollup vs Webpack 深度对比:前端构建工具终极指南
前端·javascript·webpack·node.js·vue·rollup·vite
程序猿小D8 小时前
第28节 Node.js 文件系统
服务器·前端·javascript·vscode·node.js·编辑器·vim
emo了小猫12 小时前
VScode使用npm启动项目以及npm install ,npm start报错问题处理
ide·vscode·npm
二倍本贝12 小时前
【慧游鲁博】【12】小程序端 · 智能导览对接后端文物图片识别功能
小程序·uni-app·vue·软件工程
bingbingyihao1 天前
UI框架-通知组件
前端·javascript·vue
逝缘~1 天前
小白学Pinia状态管理
前端·javascript·vue.js·vscode·es6·pinia
陌上烟雨寒1 天前
vue手写一个步骤条steps
javascript·css·vue