不废话，直接上代码！

安装包

pnpm install nprogress @types/nprogress

钩子分享

import {ref} from "vue";
import * as nProgress from "nprogress";
import 'nprogress/nprogress.css'

nProgress.configure({
    showSpinner: false
})

/**
 * 加载状态钩子
 * @param defaultLoadingStatus 默认加载状态，默认为假
 * @param enableNProgress 是否开启nProgress对应功能，默认开启
 */
export function useLoadingHook(defaultLoadingStatus: boolean = false, enableNProgress: boolean = true) {
    /**
     * 加载状态
     */
    const loadingStatus = ref<boolean>(defaultLoadingStatus);

    /**
     * 显示加载状态
     */
    function showLoading() {
        loadingStatus.value = true;
        if (enableNProgress) nProgress.start();

    }

    /**
     * 隐藏加载状态
     * @param force 是否前强制结束 nProgress 动画
     */
    function hideLoading(force = true) {
        loadingStatus.value = false;
        if (enableNProgress) nProgress.done(force);
    }

    /**
     * 包括对应方法
     */
    return {
        showLoading,
        hideLoading,
        loadingStatus
    }
}