fix(router): replace next() deprecated in Vue Router v5 (#22643)

dennybiasiolli · J-Sek · commit 4e9384629db0 · 2026-03-11T15:21:40.000+01:00
Co-authored-by: J-Sek <J-Sek@users.noreply.github.com> resolves #22632
diff --git a/packages/docs/src/main.ts b/packages/docs/src/main.ts
@@ -147,11 +147,11 @@ app.config.warnHandler = (err, vm, info) => {
   console.warn(err, vm, info)
 }
 
-router.beforeEach((to, from, next) => {
+router.beforeEach((to, from) => {
   if (to.meta.locale !== from.meta.locale) {
     localeStore.locale = to.meta.locale as string
   }
-  return to.path.endsWith('/') ? next() : next(`${trailingSlash(to.path)}` + to.hash)
+  if (!to.path.endsWith('/')) return `${trailingSlash(to.path)}` + to.hash
 })
 router.afterEach((to, from) => {
   if (to.meta.locale !== from.meta.locale && from.meta.locale === 'eo-UY') {
diff --git a/packages/vuetify/src/components/VDialog/__test__/VDialog.spec.browser.tsx b/packages/vuetify/src/components/VDialog/__test__/VDialog.spec.browser.tsx
@@ -2,8 +2,9 @@
 import { VDialog } from '../VDialog'
 
 // Utilities
-import { commands, render, screen, userEvent } from '@test'
-import { nextTick, ref } from 'vue'
+import { commands, render, screen, userEvent, wait } from '@test'
+import { h, nextTick, ref } from 'vue'
+import { createMemoryHistory, createRouter } from 'vue-router'
 
 // Tests
 describe('VDialog', () => {
@@ -88,4 +89,106 @@ describe('VDialog', () => {
     await userEvent.tab()
     await expect.poll(() => document.activeElement).toBe(first)
   })
+
+  describe('routing back', () => {
+    function createTestRouter () {
+      return createRouter({
+        history: createMemoryHistory(),
+        routes: [
+          { path: '/', component: { setup: () => () => h('h1', 'home') } },
+          { path: '/page1', component: { setup: () => () => h('h1', 'page1') } },
+          { path: '/page2', component: { setup: () => () => h('h1', 'page2') } },
+          { path: '/page3', component: { setup: () => () => h('h1', 'page3') } },
+        ],
+      })
+    }
+
+    async function simulateBackNavigation (router: ReturnType<typeof createTestRouter>) {
+      router.back()
+      for (let i = 0; i < 10; i++) await nextTick() // flush microtasks
+      window.dispatchEvent(new PopStateEvent('popstate', { state: {} }))
+      await wait()
+    }
+
+    it('should block back with persistent dialog, allow after close, and block again when reopened', async () => {
+      const router = createTestRouter()
+      await router.push('/page1')
+      await router.push('/page2')
+      await router.push('/page3')
+
+      const model = ref(true)
+      render(() => (
+        <VDialog v-model={ model.value } persistent data-testid="dialog">
+          <div data-testid="content">Content</div>
+        </VDialog>
+      ), { global: { plugins: [router] } })
+
+      await expect(screen.findByTestId('dialog')).resolves.toBeVisible()
+      await wait()
+
+      // 1st back: persistent dialog blocks navigation
+      await simulateBackNavigation(router)
+      expect(model.value).toBeTruthy()
+      expect(router.currentRoute.value.path).toBe('/page3')
+
+      // close the dialog
+      model.value = false
+      await nextTick()
+
+      // 2nd back: no dialog blocking, navigation proceeds
+      await simulateBackNavigation(router)
+      expect(router.currentRoute.value.path).toBe('/page2')
+
+      // reopen
+      model.value = true
+      await nextTick()
+      await expect(screen.findByTestId('dialog')).resolves.toBeVisible()
+      await wait()
+
+      // 3rd back: persistent dialog blocks again
+      await simulateBackNavigation(router)
+      expect(model.value).toBeTruthy()
+      expect(router.currentRoute.value.path).toBe('/page2')
+    })
+
+    it('should close non-persistent dialog on back and block navigation', async () => {
+      const router = createTestRouter()
+      await router.push('/page1')
+      await router.push('/page2')
+      await router.push('/page3')
+
+      const model = ref(false)
+      render(() => (
+        <VDialog v-model={ model.value } data-testid="dialog">
+          <div data-testid="content">Content</div>
+        </VDialog>
+      ), { global: { plugins: [router] } })
+
+      // Open dialog
+      model.value = true
+      await nextTick()
+      await expect(screen.findByTestId('dialog')).resolves.toBeVisible()
+      await wait()
+
+      // 1st back: dialog closes but route stays (navigation blocked)
+      await simulateBackNavigation(router)
+      await expect.poll(() => model.value).toBeFalsy()
+      expect(router.currentRoute.value.path).toBe('/page3')
+
+      // 2nd back: no dialog, navigation proceeds
+      await simulateBackNavigation(router)
+      expect(router.currentRoute.value.path).toBe('/page2')
+
+      // reopen
+      model.value = true
+      await nextTick()
+      await expect(screen.findByTestId('dialog')).resolves.toBeVisible()
+      await wait()
+
+      // 3rd back: dialog closes again, route stays
+      await simulateBackNavigation(router)
+      await expect.poll(() => model.value).toBeFalsy()
+      expect(router.currentRoute.value.path).toBe('/page2')
+    })
+  })
 })
diff --git a/packages/vuetify/src/components/VOverlay/VOverlay.tsx b/packages/vuetify/src/components/VOverlay/VOverlay.tsx
@@ -243,14 +243,13 @@ export const VOverlay = genericComponent<OverlaySlots>()({
 
     const router = useRouter()
     useToggleScope(() => props.closeOnBack, () => {
-      useBackButton(router, next => {
+      useBackButton(router, () => {
         if (globalTop.value && isActive.value) {
-          next(false)
           if (!props.persistent) isActive.value = false
           else animateClick()
-        } else {
-          next()
+          return false
         }
+        return undefined
       })
     })
 
diff --git a/packages/vuetify/src/composables/router.tsx b/packages/vuetify/src/composables/router.tsx
@@ -13,7 +13,7 @@ import type { PropType, Ref, SetupContext } from 'vue'
 import type {
   RouterLink as _RouterLink,
   useLink as _useLink,
-  NavigationGuardNext,
+  NavigationGuardReturn,
   RouteLocation,
   RouteLocationNormalizedLoaded,
   RouteLocationRaw,
@@ -118,21 +118,22 @@ export const makeRouterProps = propsFactory({
 }, 'router')
 
 let inTransition = false
-export function useBackButton (router: Router | undefined, cb: (next: NavigationGuardNext) => void) {
+export function useBackButton (router: Router | undefined, cb: () => NavigationGuardReturn) {
   let popped = false
   let removeBefore: (() => void) | undefined
   let removeAfter: (() => void) | undefined
 
   if (IN_BROWSER && router?.beforeEach) {
     nextTick(() => {
       window.addEventListener('popstate', onPopstate)
-      removeBefore = router.beforeEach((to, from, next) => {
+      removeBefore = router.beforeEach(() => {
         if (!inTransition) {
-          setTimeout(() => popped ? cb(next) : next())
-        } else {
-          popped ? cb(next) : next()
+          inTransition = true
+          return new Promise<NavigationGuardReturn>(resolve => {
+            setTimeout(() => resolve(popped ? cb() : undefined))
+          })
         }
-        inTransition = true
+        return popped ? cb() : undefined
       })
       removeAfter = router?.afterEach(() => {
         inTransition = false

Original file line number	Diff line number	Diff line change
`@@ -147,11 +147,11 @@ app.config.warnHandler = (err, vm, info) => {`
`147`	`147`	`console.warn(err, vm, info)`
`148`	`148`	`}`
`149`	`149`
`150`		`-router.beforeEach((to, from, next) => {`
	`150`	`+router.beforeEach((to, from) => {`
`151`	`151`	`if (to.meta.locale !== from.meta.locale) {`
`152`	`152`	`localeStore.locale = to.meta.locale as string`
`153`	`153`	`}`
`154`		- return to.path.endsWith('/') ? next() : next(`${trailingSlash(to.path)}` + to.hash)
	`154`	+ if (!to.path.endsWith('/')) return `${trailingSlash(to.path)}` + to.hash
`155`	`155`	`})`
`156`	`156`	`router.afterEach((to, from) => {`
`157`	`157`	`if (to.meta.locale !== from.meta.locale && from.meta.locale === 'eo-UY') {`