Vue3+Ts+Vite项目(第六篇)——nprogress安装与使用，实现路由加载进度条

一、先看效果

二、安装 nprogress

npm i nprogress --save

三、封装 utils

3.1 在 src 下新建 utils 文件夹，在 utils 文件夹下新建 nprogress.ts 文件

3.2 在 nprogress.ts 文件中写入如下代码

// /src/utils/nprogress.ts
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';

//全局进度条的配置
NProgress.configure({
    
    
	easing: 'ease', // 动画方式
	speed: 300, // 递增进度条的速度
	showSpinner: false, // 是否显示加载ico
	trickleSpeed: 200, // 自动递增间隔
	minimum: 0.3, // 更改启动时使用的最小百分比
	parent: 'body' //指定进度条的父容器
});

// 打开进度条
export const start = () => {
    
    
	NProgress.start();
};

// 关闭进度条
export const close = () => {
    
    
	NProgress.done();
};

四、结合路由守卫使用

4.1 /src/router/index.ts 中的全量代码

import type {
    
     App } from 'vue';
// 引入 nprogress 相关方法
import {
    
     close, start } from '@/utils/nprogress';
import {
    
     createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';

export const publicRoutes: Array<RouteRecordRaw> = [
	{
    
    
		path: '/',
		redirect: '/login'
	}
];

// 定义router
const router = createRouter({
    
    
	history: createWebHashHistory(),
	routes: publicRoutes
});

// 路由前置后卫
router.beforeEach(() => {
    
    
	// 开启进度条
	start();
});
// 路由后置后卫
router.afterEach(() => {
    
    
	// 关闭进度条
	close();
});

/* 初始化路由表 */
export function resetRouter() {
    
    
	router.getRoutes().forEach((route) => {
    
    
		const {
    
     name } = route;
		if (name) {
    
    
			router.hasRoute(name) && router.removeRoute(name);
		}
	});
}
export default router;
export const setupRouter = (app: App<Element>) => {
    
    
	app.use(router);
};

4.2 代码说明