Artikelverzeichnis
1. Schauen Sie sich zuerst die Wirkung an
2. Installieren Sie nprogress
npm i nprogress --save
3. Paket-Dienstprogramme
3.1 Erstellen Sie einen neuen Ordner srcunter und erstellen Sie eine neue Datei unter dem Ordnerutilsutilsnprogress.ts
3.2 Schreiben Sie den folgenden Code in die Datei 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. In Kombination mit Routing-Schutzvorrichtungen verwenden
/src/router/index.tsVollständiger Code in 4.1
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 Codebeschreibung
