Nuxt•8mo 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

10 Replies

pyplacca•8mo ago

share a snippet of your code

vinumOP•8mo ago

Won't really help but sure.

pyplacca•8mo ago

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

Wicker•8mo ago

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

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

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

pyplacca•8mo ago

something along those lines @vinum, this is what you'd want to have;

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

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

vinumOP•8mo ago

Thanks guys, this worked perfectly @pyplacca How do i use .map on the array? When it was not computed it worked fine but after it throws this error links.map is not a function. Thanks

pyplacca•8mo ago

the .map call should be on the array's square parenthesis otherwise, you can do this; links.value.map links is now a computed ref so it's value is returned from the value property

vinumOP•8mo ago

Once again, you saved me 🙂

pyplacca•8mo ago

you're welcome

pyplacca•8mo ago

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

Vue.js

Vue.js - The Progressive JavaScript Framework

Gaming

Programming

Make `useRoute()` update in layout