Vue3进度条nprogress是一个用于显示页面加载进度的库。要在Vue3项目中使用nprogress，需要先安装它，然后在你的项目中引入和使用。
安装nprogress
npm install nprogress --save
配置nprogress
在目录src下创建nprogress文件夹，里面创建nprogress.ts文件，在里面进行nprogress配置
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
//全局进度条的配置
NProgress.configure({
easing: 'ease', // 动画方式
speed: 1000, // 递增进度条的速度
showSpinner: false, // 是否显示加载ico
trickleSpeed: 200, // 自动递增间隔
minimum: 0.3, // 更改启动时使用的最小百分比
parent: 'body', //指定进度条的父容器
})
// 打开进度条
export const start = () => {
NProgress.start()
}
// 关闭进度条
export const close = () => {
NProgress.done()
}
路由引入nprogress
router/index.ts
import { createRouter, createWebHashHistory } from 'vue-router'
import { close, start } from '../nprogress/nprogress';
export const routes = [
//...创建页面...
//.............
]
const router = createRouter({
scrollBehavior:() => ({ left:0,top:0 }),
history: createWebHashHistory(),
routes
})
router.beforeEach((pre, next) => {
start();
next()
})
router.afterEach(() => {
close();
})
export default router
修改样式
根据自己需求修改进度条样式，在App.vue文件下
<style>
/* 进度条颜色 */
#nprogress .bar {
background: #4687FE;
}
</style>
