Nuxt•13h ago

Getting route params after changing route

Hi guys, u are my last chance before using vanilla javascript options or middleware + localStorage... I am having trouble with getting params from useRoute() from my dynamic URL routes. :1_check: Whenever I visit the URL directly OR reload the page I get the params correctly. :1_cross: I don't get the params on page, where I get by await navigateTo() (or await router.push()), which is my goal... Also, onMounted fn doesn't help (onMounted(() => console.log("pastRoute", (useRoute().params)));) it logs an empty object. But if I just reload the page... the params are there...

8 Replies

kapa.ai•13h ago

Hi @PetyXbron. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- This issue is commonly related to how Nuxt and vue-router handle dynamic route params during navigation. When you navigate programmatically (with await navigateTo() or router.push()), the route params may not be immediately available in the setup or onMounted hooks, especially if you are trying to access them synchronously right after navigation. Key points and solutions from the knowledge sources: - The useRoute() composable provides reactive access to route params. However, if you access useRoute().params immediately after navigation, the params might not be updated yet. This is because the navigation is asynchronous, and the component may mount before the new params are set. - To reactively respond to changes in route params, you should use a watcher on the specific param or on the entire params object. This ensures your logic runs whenever the params change, not just on initial mount. Example solution:

<script setup>
const route = useRoute()

watch(
  () => route.params,
  (newParams) => {
    console.log('Route params changed:', newParams)
    // Your logic here
  },
  { immediate: true }
)
</script>

<script setup>
const route = useRoute()

watch(
  () => route.params,
  (newParams) => {
    console.log('Route params changed:', newParams)
    // Your logic here
  },
  { immediate: true }
)
</script>

Or, if you want to watch a specific param (e.g., id):

<script setup>
const route = useRoute()

watch(
  () => route.params.id,
  (newId) => {
    console.log('Route param id changed:', newId)
    // Your logic here
  },
  { immediate: true }
)
</script>

<script setup>
const route = useRoute()

watch(
  () => route.params.id,
  (newId) => {
    console.log('Route param id changed:', newId)
    // Your logic here
  },
  { immediate: true }
)
</script>

This approach is confirmed in the Nuxt documentation and community answers, where watchers are used to handle reactivity for route params and queries after navigation, ensuring you always get the latest values regardless of how the navigation occurred (Nuxt useRoute composable, Stack Overflow example). Summary:
- Access route params reactively using a watcher. - Do not rely solely on onMounted or synchronous access after navigation. - This pattern works for both direct visits and programmatic navigation. If you still experience issues, ensure you are not destructuring useRoute().params directly in the setup, as this can break reactivity (see docs). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13h ago

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

PetyXbronOP•13h ago

@kapa.ai even waiting few seconds doesn't trigger the watch() event. Why I cannot access route params immediately? Wouldn't vanilla JS work here with window.location functions?

kapa.ai•13h ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The reason you cannot access route params immediately after navigation in Nuxt is due to how the framework and vue-router handle route updates and component lifecycle. When you navigate programmatically (with navigateTo or router.push), the new component may mount before the route params are fully updated, so accessing useRoute().params right away (even in onMounted or with a short delay) might still give you an empty object. This is a known behavior and is why Nuxt recommends using watchers to reactively respond to changes in route params, as shown in the documentation and community examples. The watcher will only trigger when the params actually change, which may not be immediate after navigation if the component is already mounted and the params haven't updated yet Nuxt useRoute composable Stack Overflow example. Vanilla JavaScript (using window.location) would give you the URL, but it does not provide parsed route params as Nuxt's routing system does. You would have to manually parse the URL to extract params, and you would lose the benefits of Nuxt's reactivity and routing features. In summary:
- The delay or absence of params is due to the asynchronous nature of navigation and route updates in Nuxt. - Watchers are the recommended way to react to param changes. - Vanilla JS can access the URL, but not the parsed params, and is not reactive. If the watcher is not triggering even after waiting, double-check that you are watching the correct reactive source (e.g., a computed getter for the param) as shown in the documentation Docs: useAsyncData watch workaround. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13h ago

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

PetyXbronOP•12h ago

@kapa.ai Hi guys, I am having a serious issue with vue-router in the past few days. I'm not sure if this is correct or meant to be. I am redirecting/routing within the app by return await navigateTo({ path: /app/VALUE});, and in the middleware - to.path, neither to.fullPath doesn't display correct information... It displays just /, but the navigation happens successfully anyways... To reach my goal, I am trying useRoute().params.VALUE in my Layout of the page. It's undefined. It only works when I refresh the page after the redirect or whenever I visit the URL with the param directly. Using watch() or onMounted() functions in the Layout doesn't help to get the param.. Is there any way to fix that? Am I missing something?

Using [email protected] [email protected] (the latest ones)

kapa.ai•12h ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- This issue is a known challenge when working with dynamic route params in Nuxt 3 and vue-router. According to the official Nuxt documentation and community discussions, route params accessed via useRoute().params may not be immediately available in certain contexts, especially in layouts or when navigating programmatically with navigateTo. This is because the route update and component lifecycle are asynchronous, and the params may not be set when your code first runs Nuxt useRoute composable. Key points from the knowledge sources: - useRoute() is reactive, but if you access params immediately (e.g., in setup or onMounted), they may be empty after navigation. This is especially true in layouts, which are shared across pages and may not remount on navigation. - watch() is the recommended approach to react to changes in route params. However, if the watcher is not triggering, it may be because the layout component is not being re-created, and the params are not changing as expected in that context Stack Overflow example. - Direct access to params in layouts can be unreliable for dynamic routes, as layouts are not tied to specific route params and may not update as you expect. What you can do: - If you need to access route params reliably, do so in the page component rather than the layout. - If you must use the layout, set up a watcher on useRoute().params and ensure your logic is inside the watcher callback. Example:

  <script setup>
  const route = useRoute()

  watch(
    () => route.params,
    (newParams) => {
      console.log('Route params changed:', newParams)
      // Your logic here
    },
    { immediate: true }
  )
  </script>

  <script setup>
  const route = useRoute()

  watch(
    () => route.params,
    (newParams) => {
      console.log('Route params changed:', newParams)
      // Your logic here
    },
    { immediate: true }
  )
  </script>

- If this still does not work in your layout, consider moving the logic to the page component, or pass the params as props from the page to the layout if needed. Summary:
This is not a bug, but a limitation of how Nuxt 3 layouts and vue-router handle dynamic params. The recommended approach is to use watchers and, if possible, handle param-dependent logic in the page component rather than the layout. If you need more advanced behavior, you may need to restructure your app to avoid relying on dynamic params in layouts Nuxt useRoute composable Stack Overflow example. If you need more specific behavior, the knowledge sources do not provide a workaround for reliably accessing dynamic params in layouts after programmatic navigation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•12h ago

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

Gaming

Programming

Getting route params after changing route

Did you find this page helpful?