From eb22ce9ae25a2a404e540b3a85130fca62182c50 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 6 Apr 2022 13:45:18 +0100
Subject: [PATCH] fix(nuxt3): move new router behavior to `useActiveRoute`
 (#4124)

---
 packages/bridge/src/auto-imports.ts          |  2 +-
 packages/nuxt3/src/app/composables/index.ts  |  2 +-
 packages/nuxt3/src/app/composables/router.ts |  4 ++++
 packages/nuxt3/src/auto-imports/presets.ts   |  1 +
 packages/nuxt3/src/pages/runtime/router.ts   | 17 ++++++++++++-----
 5 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/packages/bridge/src/auto-imports.ts b/packages/bridge/src/auto-imports.ts
index 9ecad332f1..a53e3836a3 100644
--- a/packages/bridge/src/auto-imports.ts
+++ b/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 () {
diff --git a/packages/nuxt3/src/app/composables/index.ts b/packages/nuxt3/src/app/composables/index.ts
index 03300f5533..f5e335fc0a 100644
--- a/packages/nuxt3/src/app/composables/index.ts
+++ b/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'
diff --git a/packages/nuxt3/src/app/composables/router.ts b/packages/nuxt3/src/app/composables/router.ts
index a2b73237f3..efceb629c7 100644
--- a/packages/nuxt3/src/app/composables/router.ts
+++ b/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>
 }
diff --git a/packages/nuxt3/src/auto-imports/presets.ts b/packages/nuxt3/src/auto-imports/presets.ts
index 5e0a0ab1c5..92abf1e29d 100644
--- a/packages/nuxt3/src/auto-imports/presets.ts
+++ b/packages/nuxt3/src/auto-imports/presets.ts
@@ -36,6 +36,7 @@ export const appPreset = defineUnimportPreset({
     'useRequestHeaders',
     'useRouter',
     'useRoute',
+    'useActiveRoute',
     'defineNuxtRouteMiddleware',
     'navigateTo',
     'abortNavigation',
diff --git a/packages/nuxt3/src/pages/runtime/router.ts b/packages/nuxt3/src/pages/runtime/router.ts
index 650ae07fbf..26160233a5 100644
--- a/packages/nuxt3/src/pages/runtime/router.ts
+++ b/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 syncCurrentRoute = () => { currentRoute.value = router.currentRoute.value }
+  const _activeRoute = shallowRef(router.resolve(path) as RouteLocation)
+  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 = {}
-  for (const key in currentRoute.value) {
-    route[key] = computed(() => currentRoute.value[key])
+  const activeRoute = {}
+  for (const key in _activeRoute.value) {
+    activeRoute[key] = computed(() => _activeRoute.value[key])
   }
 
   nuxtApp._route = reactive(route)
+  nuxtApp._activeRoute = reactive(activeRoute)
 
   nuxtApp._middleware = nuxtApp._middleware || {
     global: [],