Nuxt•16mo ago

React to route change in layout

Hello,

I have a sidenav in my layout which has URLs depending on the route parameter.
So e.g. I have the URL

/items/12

/items/12

/items/12

/items/12 and now my sidenav should have links like

/items/12/buy

/items/12/buy

/items/12/buy

/items/12/buy, however that only works if I reload since the layout is static. If I now navigate to

/item/13

/item/13

/item/13

/item/13, the link will say

/items/undefined

/items/undefined

/items/undefined

/items/undefined

I tried using a computed like this:

const route = useRoute();
const params= computed(() => route.params);

const route = useRoute();
const params= computed(() => route.params);

const route = useRoute();
const params= computed(() => route.params);

const route = useRoute();
const params= computed(() => route.params);

But this results in the exact same behavior.

What can I do to prevent this?

Solution

@ncls.

const router = useRouter();

const x = computed(() => router.currentRoute.value.path);

const router = useRouter();

const x = computed(() => router.currentRoute.value.path);

const router = useRouter();

const x = computed(() => router.currentRoute.value.path);

const router = useRouter();

const x = computed(() => router.currentRoute.value.path);