From eb2d305e76a52043c79e6f3f6a992c1613d0c56e Mon Sep 17 00:00:00 2001 From: julien huang Date: Sun, 10 Dec 2023 21:01:24 +0100 Subject: [PATCH 1/2] fix(nuxt): assign route without reactivity afterEach --- packages/nuxt/src/pages/runtime/plugins/router.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/nuxt/src/pages/runtime/plugins/router.ts b/packages/nuxt/src/pages/runtime/plugins/router.ts index e39e33d890..9f8bf65667 100644 --- a/packages/nuxt/src/pages/runtime/plugins/router.ts +++ b/packages/nuxt/src/pages/runtime/plugins/router.ts @@ -1,4 +1,4 @@ -import { isReadonly, reactive, shallowReactive, shallowRef } from 'vue' +import { isReadonly, reactive, shallowReactive, shallowRef, toValue } from 'vue' import type { Ref } from 'vue' import type { RouteLocation, Router, RouterScrollBehavior } from '#vue-router' import { @@ -99,11 +99,15 @@ const plugin: Plugin<{ router: Router }> = defineNuxtPlugin({ const _route = shallowRef(router.resolve(initialURL) as RouteLocation) const syncCurrentRoute = () => { _route.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 // so we need to update the route manually if (to.matched[0]?.components?.default === from.matched[0]?.components?.default) { syncCurrentRoute() + } else { + // assign toValue to avoid reactivity + Object.assign(toValue(_route), router.currentRoute.value) } }) From 52a344d57d8c31213ae561272eb51fffffc0967e Mon Sep 17 00:00:00 2001 From: julien huang Date: Sun, 10 Dec 2023 21:06:14 +0100 Subject: [PATCH 2/2] chore: lint --- packages/nuxt/src/pages/runtime/plugins/router.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/nuxt/src/pages/runtime/plugins/router.ts b/packages/nuxt/src/pages/runtime/plugins/router.ts index 9f8bf65667..bf24e79e15 100644 --- a/packages/nuxt/src/pages/runtime/plugins/router.ts +++ b/packages/nuxt/src/pages/runtime/plugins/router.ts @@ -99,7 +99,6 @@ const plugin: Plugin<{ router: Router }> = defineNuxtPlugin({ const _route = shallowRef(router.resolve(initialURL) as RouteLocation) const syncCurrentRoute = () => { _route.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 // so we need to update the route manually