Search Get Started

Nuxt•2y ago

Make `useRoute()` update in layout

Hi!
Im trying to use useRoute() in a layout, to update my navigations links based on the ´route.params.id´, but the route object does not update when going from page to page. How do i make the layout update the route object?

Any help is greatly appreciated.
Thanks

Nuxt Community Chat Server

31,867Members

View on Discord

Was this page helpful?

Product

Pricing Docs Communities

Resources

About Blog Changelog Contributors

Legal

Terms Privacy Cookies EULA

Twitter GitHub Discord

© 2026 Hedgehog Software, LLC. All rights reserved.

pyplacca

P

pyplacca•4/3/24, 11:48 AM

share a snippet of your code

pyplacca

Ppyplacca share a snippet of your code

V1NUM

V

V1NUMOP•4/3/24, 12:08 PM

Won't really help but sure.

pyplacca

P

pyplacca•4/3/24, 12:14 PM

converting links to a computed state should solve the problem. @Wicker answered you here https://discord.com/channels/473401852243869706/473406506579263488/1225043516317503538

Wicker

W

Wicker•4/3/24, 12:17 PM

Assuming it would look like this, i cant really answer you if i dont have the whole picture

pyplacca

P

pyplacca•4/3/24, 12:19 PM

something along those lines

pyplacca

P

pyplacca•4/3/24, 12:19 PM

@vinum, this is what you'd want to have;

pyplacca

Ppyplacca @vinum, this is what you'd want to have; ```js const links = computed(() => [{ ...

V1NUM

V

V1NUMOP•4/3/24, 12:22 PM

Thanks guys, this worked perfectly

V1NUM

V

V1NUMOP•4/3/24, 12:26 PM

@pyplacca How do i use .map on the array? When it was not computed it worked fine but after it throws this error . Thanks

pyplacca

P

pyplacca•4/3/24, 12:27 PM

the call should be on the array's square parenthesis

pyplacca

P

pyplacca•4/3/24, 12:27 PM

otherwise, you can do this;

pyplacca

P

pyplacca•4/3/24, 12:28 PM

links is now a computed ref so it's value is returned from the property

pyplacca

Ppyplacca otherwise, you can do this; `links.value.map`

V1NUM

V

V1NUMOP•4/3/24, 12:28 PM

Once again, you saved me

pyplacca

P

pyplacca•4/3/24, 12:28 PM

you're welcome

pyplacca

P

pyplacca•4/3/24, 12:31 PM

@vinum, you can read more on computed properties here to learn other advanced usages

Vue.js - The Progressive JavaScript Framework

const route = computed(()=>{
return useRoute().params.site
})

const route = computed(()=>{
return useRoute().params.site
})

links.map is not a function

links.map is not a function

.map

.map

links.value.map

links.value.map

value

value

const links = computed(() => [{
  ...,
  to: '/site-' + route.params.id + '/'
}])

const links = computed(() => [{
  ...,
  to: '/site-' + route.params.id + '/'
}])