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()
})
相关推荐
满怀10159 小时前
【Vue 3全栈实战】从响应式原理到企业级架构设计
前端·javascript·vue.js·vue
MonkeyKing_sunyuhua10 小时前
VSCode + Cline AI辅助编程完全指南
ide·人工智能·vscode
MonkeyKing_sunyuhua13 小时前
在 Visual Studio Code (VSCode) 中配置 MCP(Model Context Protocol)
ide·vscode·编辑器
smileNicky13 小时前
在 VSCode 中运行 Vue.js 项目
ide·vue.js·vscode
Growthofnotes14 小时前
VSCode中Node.js 使用教程
ide·vscode·node.js
小妖66616 小时前
VScode 的插件本地更改后怎么生效
ide·vscode·编辑器
Minyy1118 小时前
Vue3指令(二)--v-text、v-html数据渲染,计算属性
前端·javascript·vue.js·前端框架·vue·html
MonkeyKing_sunyuhua19 小时前
ubuntu22.04卸载vscode
ide·vscode·编辑器
一叶茶19 小时前
VsCode和AI的前端使用体验:分别使用了Copilot、通义灵码、iflyCode和Trae
前端·vscode·gpt·ai·chatgpt·copilot·deepseek
alladmin1 天前
VSCode CMake Debug
ide·vscode·编辑器