diff --git a/packages/nuxt/src/app/components/route-provider.ts b/packages/nuxt/src/app/components/route-provider.ts index 9e283895a..d24b807aa 100644 --- a/packages/nuxt/src/app/components/route-provider.ts +++ b/packages/nuxt/src/app/components/route-provider.ts @@ -1,4 +1,4 @@ -import { computed, defineComponent, h, nextTick, onMounted, provide, reactive } from 'vue' +import { defineComponent, h, nextTick, onMounted, provide, shallowReactive } from 'vue' import type { Ref, VNode } from 'vue' import type { RouteLocation, RouteLocationNormalizedLoaded } from '#vue-router' import { PageRouteSymbol } from '#app/components/injections' @@ -28,10 +28,12 @@ export const RouteProvider = defineComponent({ // Provide a reactive route within the page const route = {} as RouteLocation for (const key in props.route) { - (route as any)[key] = computed(() => previousKey === props.renderKey ? props.route[key as keyof RouteLocationNormalizedLoaded] : previousRoute[key as keyof RouteLocationNormalizedLoaded]) + Object.defineProperty(route, key, { + get: () => previousKey === props.renderKey ? props.route[key as keyof RouteLocationNormalizedLoaded] : previousRoute[key as keyof RouteLocationNormalizedLoaded] + }) } - provide(PageRouteSymbol, reactive(route)) + provide(PageRouteSymbol, shallowReactive(route)) let vnode: VNode if (process.dev && process.client && props.trackRootNodes) { diff --git a/packages/nuxt/src/pages/runtime/plugins/router.ts b/packages/nuxt/src/pages/runtime/plugins/router.ts index 9d63a966e..27030a041 100644 --- a/packages/nuxt/src/pages/runtime/plugins/router.ts +++ b/packages/nuxt/src/pages/runtime/plugins/router.ts @@ -1,4 +1,4 @@ -import { computed, isReadonly, reactive, shallowRef } from 'vue' +import { isReadonly, reactive, shallowReactive, shallowRef } from 'vue' import type { Ref } from 'vue' import type { RouteLocation, Router, RouterScrollBehavior } from '#vue-router' import { @@ -108,10 +108,12 @@ const plugin: Plugin<{ router: Router }> = defineNuxtPlugin({ // https://github.com/vuejs/router/blob/main/packages/router/src/router.ts#L1225-L1233 const route = {} as RouteLocation for (const key in _route.value) { - (route as any)[key] = computed(() => _route.value[key as keyof RouteLocation]) + Object.defineProperty(route, key, { + get: () => _route.value[key as keyof RouteLocation] + }) } - nuxtApp._route = reactive(route) + nuxtApp._route = shallowReactive(route) nuxtApp._middleware = nuxtApp._middleware || { global: [],