文章目录
一、先看效果
二、安装 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);
};