#Weird route behavior on client side navigation

1 messages · Page 1 of 1 (latest)

pseudo steppeBOT
#

Hi @fervent pivot. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

In Nuxt 2 with @nuxtjs/composition-api, the useRoute() composable returns a computed ref (route.value). When you log route.value.path inside the setup() function, you see the correct path every time you navigate to a new slug, even though you didn't set up a watcher.

This happens because, in Nuxt 2 with the composition API, the route object is a computed ref that tracks the underlying $route from Vue Router. When you perform client-side navigation, Nuxt destroys and recreates the page component for the new route. This means the setup() function is called again, and your console.log runs with the new route value. So, even though you aren't using a watcher, the log appears on every navigation because the component is re-initialized, not because the computed ref is magically reactive in-place.

This is expected behavior: in Nuxt, navigating to a new page (even with the same component but different params, like a new slug) will unmount and remount the page component, triggering setup() again. That's why your log runs every time, and the value is always up to date.

If you want to react to route changes without remounting, you would need to use a watcher on the route or its properties. But in your case, the re-initialization is what causes the log to update.

This behavior is also reflected in Nuxt 3, where the useRoute() composable returns a plain object (not a computed ref), but the principle remains: page components are recreated on navigation, so setup() runs again and logs the new route info Docs: useRoute.

#

If you want more details on the differences between Nuxt 2 and Nuxt 3 composition API behavior, see the migration notes Bridge: Migrating from @nuxtjs/composition-api.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@fervent pivot Kapa.ai is still learning and improving, please let me know how I did by reacting below.

fervent pivot
#

@pseudo steppe so what is the point of having route being a computed ref, if it will be always completely overwritten by a component reinitilization?

pseudo steppeBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

The knowledge sources confirm that in Nuxt 2 with @nuxtjs/composition-api, the useRoute() composable returns a computed ref (route.value). However, they do not explicitly explain the rationale for making route a computed ref when the component is always re-initialized on navigation, thus "overwriting" the route context.

What is clear from the migration documentation is that in Nuxt 3 (and Nuxt Bridge), useRoute() no longer returns a computed property, but a plain object, reflecting a change in approach Bridge: Migrating from @nuxtjs/composition-api. This suggests that the computed ref approach in Nuxt 2 was likely intended to allow for reactivity within a component's lifecycle—so if you used watch or computed on route.value, you could respond to route changes without a full component reload. However, in practice, Nuxt's routing often re-initializes the page component, making this reactivity less relevant for most page-level use cases.

In summary:
The knowledge sources do not explicitly state the point of having route as a computed ref in Nuxt 2, given the component re-initialization behavior. However, it appears this design was to support reactivity for cases where a component is not re-created on navigation (such as nested or child components), but for most page components, the reactivity is not leveraged due to remounting. This is likely why Nuxt 3 moved away from the computed ref approach for useRoute().

If you need more details on this design decision, the knowledge sources do not provide further explanation.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@fervent pivot Kapa.ai is still learning and improving, please let me know how I did by reacting below.

fervent pivot
#

@pseudo steppe you meant it is plain object or a reactive object in the newer version?

pseudo steppeBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

In Nuxt 3 and Nuxt Bridge, the useRoute() composable returns a plain object, not a computed property or a ref. This is a change from Nuxt 2 with @nuxtjs/composition-api, where useRoute() returned a computed ref. The documentation states:

The only key difference is that useRoute no longer returns a computed property.

- import { useRouter, useRoute } from '@nuxtjs/composition-api'

  const router = useRouter()
  const route = useRoute()

- console.log(route.value.path)
+ console.log(route.path)

Bridge: Migrating from @nuxtjs/composition-api

So, in the newer versions, useRoute() gives you a plain object representing the current route.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: