fix(nuxt3): move new router behavior to useActiveRoute (#4124)

packages/bridge/src/auto-imports.ts

@@ -4,7 +4,7 @@ import type { Preset } from 'unimport'
 import autoImports from '../../nuxt3/src/auto-imports/module'
 import { vuePreset } from '../../nuxt3/src/auto-imports/presets'
 
-const UnsupportedImports = new Set(['useAsyncData', 'useFetch', 'useError', 'throwError', 'clearError', 'defineNuxtLink'])
+const UnsupportedImports = new Set(['useAsyncData', 'useFetch', 'useError', 'throwError', 'clearError', 'defineNuxtLink', 'useActiveRoute'])
 const CapiHelpers = new Set(Object.keys(CompositionApi))
 
 export function setupAutoImports () {

packages/nuxt3/src/app/composables/index.ts

@@ -9,5 +9,5 @@ export type { FetchResult, UseFetchOptions } from './fetch'
 export { useCookie } from './cookie'
 export type { CookieOptions, CookieRef } from './cookie'
 export { useRequestHeaders } from './ssr'
-export { abortNavigation, addRouteMiddleware, defineNuxtRouteMiddleware, navigateTo, useRoute, useRouter } from './router'
+export { abortNavigation, addRouteMiddleware, defineNuxtRouteMiddleware, navigateTo, useRoute, useActiveRoute, useRouter } from './router'
 export type { AddRouteMiddlewareOptions, RouteMiddleware } from './router'

packages/nuxt3/src/app/composables/router.ts

@@ -10,6 +10,10 @@ export const useRoute = () => {
   return useNuxtApp()._route as RouteLocationNormalizedLoaded
 }
 
+export const useActiveRoute = () => {
+  return useNuxtApp()._activeRoute as RouteLocationNormalizedLoaded
+}
+
 export interface RouteMiddleware {
   (to: RouteLocationNormalized, from: RouteLocationNormalized): ReturnType<NavigationGuard>
 }

packages/nuxt3/src/auto-imports/presets.ts

@@ -36,6 +36,7 @@ export const appPreset = defineUnimportPreset({
     'useRequestHeaders',
     'useRouter',
     'useRoute',
+    'useActiveRoute',
     'defineNuxtRouteMiddleware',
     'navigateTo',
     'abortNavigation',

packages/nuxt3/src/pages/runtime/router.ts

@@ -75,10 +75,16 @@ export default defineNuxtPlugin((nuxtApp) => {
     get: () => previousRoute.value
   })
 
+  // https://github.com/vuejs/vue-router-next/blob/master/src/router.ts#L1192-L1200
+  const route = {}
+  for (const key in router.currentRoute.value) {
+    route[key] = computed(() => router.currentRoute.value[key])
+  }
+
   // Allows suspending the route object until page navigation completes
   const path = process.server ? nuxtApp.ssrContext.req.url : createCurrentLocation(baseURL, window.location)
-  const currentRoute = shallowRef(router.resolve(path) as RouteLocation)
+  const _activeRoute = shallowRef(router.resolve(path) as RouteLocation)
-  const syncCurrentRoute = () => { currentRoute.value = router.currentRoute.value }
+  const syncCurrentRoute = () => { _activeRoute.value = router.currentRoute.value }
   nuxtApp.hook('page:finish', syncCurrentRoute)
   router.afterEach((to, from) => {
     // We won't trigger suspense if the component is reused between routes
@@ -88,12 +94,13 @@ export default defineNuxtPlugin((nuxtApp) => {
     }
   })
   // https://github.com/vuejs/vue-router-next/blob/master/src/router.ts#L1192-L1200
-  const route = {}
+  const activeRoute = {}
-  for (const key in currentRoute.value) {
+  for (const key in _activeRoute.value) {
-    route[key] = computed(() => currentRoute.value[key])
+    activeRoute[key] = computed(() => _activeRoute.value[key])
   }
 
   nuxtApp._route = reactive(route)
+  nuxtApp._activeRoute = reactive(activeRoute)
 
   nuxtApp._middleware = nuxtApp._middleware || {
     global: [],