fix(guards): run beforeRouteEnter with app context

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

@@ -5,7 +5,7 @@ import { createDom, newRouter as createRouter } from '../utils'
 import { mount } from '@vue/test-utils'
 import { inject } from 'vue'
 import { mockWarn } from 'jest-mock-warn'
-import type { Router } from '../../src'
+import { type Router } from '../../src'
 
 describe('inject() within navigation guards', () => {
   mockWarn()
@@ -48,4 +48,92 @@ describe('inject() within navigation guards', () => {
       await router.isReady()
     })
   }
+
+  describe('in-component guards', () => {
+    it('beforeRouteEnter', async () => {
+      expect.assertions(1)
+      const router = createRouter({
+        routes: [
+          {
+            path: '/',
+            component: {
+              template: `<div>Page</div>`,
+              beforeRouteEnter() {
+                expect(inject('test')).toBe('hello')
+              },
+            },
+          },
+        ],
+      })
+      factory(router)
+      await router.isReady()
+      await router.push('/')
+    })
+
+    it('beforeRouteEnter + lazy load', async () => {
+      expect.assertions(1)
+      const router = createRouter({
+        routes: [
+          {
+            path: '/',
+            component: () =>
+              new Promise(r =>
+                r({
+                  template: `<div>Page</div>`,
+                  beforeRouteEnter() {
+                    expect(inject('test')).toBe('hello')
+                  },
+                })
+              ),
+          },
+        ],
+      })
+      factory(router)
+      await router.isReady()
+      await router.push('/')
+    })
+
+    it('beforeRouteUpdate', async () => {
+      expect.assertions(1)
+      const router = createRouter({
+        routes: [
+          {
+            path: '/',
+            component: {
+              template: `<div>Page</div>`,
+              beforeRouteUpdate() {
+                expect(inject('test')).toBe('hello')
+              },
+            },
+          },
+        ],
+      })
+      factory(router)
+      await router.isReady()
+      await router.push('/')
+      await router.push('/#other')
+    })
+
+    it('beforeRouteLeave', async () => {
+      expect.assertions(1)
+      const router = createRouter({
+        routes: [
+          { path: '/', component: PageComponent },
+          {
+            path: '/foo',
+            component: {
+              template: `<div>Page</div>`,
+              beforeRouteLeave() {
+                expect(inject('test')).toBe('hello')
+              },
+            },
+          },
+        ],
+      })
+      factory(router)
+      await router.isReady()
+      await router.push('/foo')
+      await router.push('/')
+    })
+  })
 })

packages/router/src/navigationGuards.ts

@@ -231,7 +231,8 @@ export function extractComponentsGuards(
   matched: RouteRecordNormalized[],
   guardType: GuardType,
   to: RouteLocationNormalized,
-  from: RouteLocationNormalizedLoaded
+  from: RouteLocationNormalizedLoaded,
+  runWithContext: <T>(fn: () => T) => T = fn => fn()
 ) {
   const guards: Array<() => Promise<void>> = []
 
@@ -292,7 +293,12 @@ export function extractComponentsGuards(
         const options: ComponentOptions =
           (rawComponent as any).__vccOpts || rawComponent
         const guard = options[guardType]
-        guard && guards.push(guardToPromiseFn(guard, to, from, record, name))
+        guard &&
+          guards.push(
+            runWithContext(() =>
+              guardToPromiseFn(guard, to, from, record, name)
+            )
+          )
       } else {
         // start requesting the chunk already
         let componentPromise: Promise<

packages/router/src/router.ts

@@ -879,7 +879,8 @@ export function createRouter(options: RouterOptions): Router {
             enteringRecords,
             'beforeRouteEnter',
             to,
-            from
+            from,
+            runWithContext
           )
           guards.push(canceledNavigationCheck)