前端vue3项目使用nprogress动画组件，实现页面加载动画

打工人小夏2025-12-14 9:27

在项目中使用了nprogress动画组件，简单记录一下

nprogress网址：

首先在项目中安装执行命令： npm i nprogress

在node_modules中可以找到

1.首先在main.ts中引入nprogress.css文件,你项目应该时main.js

复制代码

import "nprogress/nprogress.css"

我这边为了通用所以定义了公共方法

2.引入nprogress

3.定义公共方法，这里将使用nprogress动画组件的方法，start(开始)和done(结束)

复制代码

//显示全局loading
export function showFulllLoading() {
    nprogress.start()
}
//隐藏全局loading
export function hideFulllLoading() {
    nprogress.done()
}

4.使用路由守卫，router.beforeEach全局前置守卫，router.afterEach全局后置守卫

我这里为了方便管理是另外创建的文件来使用路由守卫

还需再main.ts中引入这个文件

引入定义的公共方法，并进行使用，开启loading

关闭loading

这样每次页面跳转之后都能有加载动画效果

如果样式不行，可以自己进行更改，在app.vue里定义它的样式即可

动画演示效果

感谢观看！