vue3+ts 实现切换菜单顶部进度条显示

1、安装

npm i nprogress --save

npm i @types/nprogress --save-dev

2、监听路由

新建文件：src/router/guard/index.ts

import type { Router } from "vue-router";
import * as nProgress from "nprogress";
import "nprogress/nprogress.css";

export function setupRouterGuard(router: Router) {
    createProgressGuard(router);
}
export function createProgressGuard(router: Router) {
  router.beforeEach(async () => {
    nProgress.start();
    return true;
  });
  router.afterEach(async () => {
    nProgress.done();
    return true;
  });
}

3、main.ts中引入

import { setupRouterGuard } from './router/guard/index';

 setupRouterGuard(router);

现在项目中切换菜单，顶部就会显示进度条加载了。

当然也可以进度条属性配置，在src/router/guard/index.ts中配置

nProgress.configure({

    easing: 'ease', // 动画方式

    speed: 500, // 递增进度条的速度

    showSpinner: false, // 是否显示加载 icon

    trickleSpeed: 200, // 自动递增间隔

    minimum: 0.3 // 初始化时的最小百分比

  })