packages/router/CHANGELOG.md

@@ -1,3 +1,9 @@
+## [4.2.4](https://github.com/vuejs/router/compare/v4.2.3...v4.2.4) (2023-07-06)
+
+### Bug Fixes
+
+- allow removing guards within the guard ([d60d36c](https://github.com/vuejs/router/commit/d60d36c49bbbd308618926ff0131890bfed2cdff))
+
 ## [4.2.3](https://github.com/vuejs/router/compare/v4.2.2...v4.2.3) (2023-07-05)
 
 ### Performance Improvements

packages/router/__tests__/guards/afterEach.spec.ts

@@ -65,4 +65,16 @@ describe('router.afterEach', () => {
     )
     expect(spy).toHaveBeenCalledTimes(2)
   })
+
+  it('removing an afterEach guard within one does not affect others', async () => {
+    const spy1 = jest.fn()
+    const spy2 = jest.fn()
+    const router = createRouter({ routes })
+    router.afterEach(spy1)
+    const remove = router.afterEach(spy2)
+    spy1.mockImplementationOnce(remove)
+    await router.push('/foo')
+    expect(spy1).toHaveBeenCalledTimes(1)
+    expect(spy2).toHaveBeenCalledTimes(1)
+  })
 })

packages/router/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-router",
-  "version": "4.2.3",
+  "version": "4.2.4",
   "main": "index.js",
   "unpkg": "dist/vue-router.global.js",
   "jsdelivr": "dist/vue-router.global.js",

packages/router/src/router.ts

@@ -906,9 +906,9 @@ export function createRouter(options: RouterOptions): Router {
   ): void {
     // navigation is confirmed, call afterGuards
     // TODO: wrap with error handlers
-    for (const guard of afterGuards.list()) {
-      runWithContext(() => guard(to, from, failure))
-    }
+    afterGuards
+      .list()
+      .forEach(guard => runWithContext(() => guard(to, from, failure)))
   }
 
   /**

packages/router/src/utils/callbacks.ts

@@ -18,7 +18,7 @@ export function useCallbacks<T>() {
 
   return {
     add,
-    list: () => handlers,
+    list: () => handlers.slice(),
     reset,
   }
 }