fix(router): 修复 连续跳转两个路由菜单 loading不关闭的问题 (#41)

src/router/guard/index.ts

@@ -3,7 +3,7 @@ import { PageEnum } from '@/enums/pageEnum';
 import { useUserStore } from '@/store';
 import { event, mitter } from '@/event';
 import { start } from '@/utils/nProgress';
-import { loading } from '@/utils/loading';
+import { closeLoading, loading } from '@/utils/loading';
 // Don't change the order of creation
 export function setupRouterGuard(router: Router) {
   createPermissionGuard(router);
@@ -30,9 +30,10 @@ function createPermissionGuard(router: Router) {
 
 // 处理页面加载进度条和loading
 function createProgressGuard(router: Router) {
-  router.beforeEach(async (to) => {
+  router.beforeEach(async (to, from) => {
     start(to.matched.length);
-    loading({}, to.matched.length,'layout');
+    closeLoading(false, from.matched.length, 'layout');
+    loading({}, to.matched.length, 'layout');
     return true;
   });
 }

src/utils/loading.ts

@@ -8,11 +8,11 @@ class Loading {
     this.execClose = execClose;
   }
   private number = 0;
-  loading(options?: LoadingOptions, number = 1) {
+  public loading(options?: LoadingOptions, number = 1) {
     this.number += number;
     this.execLoading(options);
   }
-  throttleClose = throttle(
+  public throttleClose = throttle(
     function (this: Loading) {
       if (this.number <= 0) {
         this.execClose();
@@ -22,13 +22,13 @@ class Loading {
     220,
     { leading: false },
   );
-  close(number = 1) {
+  public close(number = 1) {
     if (this.number > 0) {
-      this.number -= number;
+      this.number -= Math.min(this.number, number);
       this.throttleClose();
     }
   }
-  forceClose() {
+  public forceClose() {
     this.number = 0;
     loadingInstance.close();
     this.throttleClose.cancel();
@@ -40,20 +40,20 @@ export const loadingObject = {
     (options?: LoadingOptions) => (loadingInstance = ElLoading.service(options)),
     () => loadingInstance.close(),
   ),
-  layout:new Loading(
+  layout: new Loading(
     (options?: LoadingOptions) => (useGlobalStore().loadingOptions = options ? reactive(options) : {}),
     () => (useGlobalStore().loadingOptions = undefined),
   ),
-}
+};
 
-export function loading(options?: LoadingOptions, number = 1, mode:keyof typeof loadingObject = 'global') {
-  const loading = loadingObject[mode]
+export function loading(options?: LoadingOptions, number = 1, mode: keyof typeof loadingObject = 'global') {
+  const loading = loadingObject[mode];
   loading.loading(options, number);
   return loading;
 }
 
-export function closeLoading(force = false, number = 1, mode:keyof typeof loadingObject = 'global'): void {
-  const loading = loadingObject[mode]
+export function closeLoading(force = false, number = 1, mode: keyof typeof loadingObject = 'global'): void {
+  const loading = loadingObject[mode];
   if (force) {
     loading.forceClose();
     return;