Vue3进度条nprogress(手机端、PC端通用)

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>

Nprogress的gitHub地址

Nprogress的gitHub地址https://github.com/rstacruz/nprogress#