How to implement dynamic tabs in nuxt using routing?

Question

JavaScript

Hello everyone, I started to study nuxt js, I decided to create a test online store on it.

I have a specific product page that has tabs.
These tabs should work together with vue-router, which would be convenient for users (you could drop a link to certain content)

My implementation of such tabs:
in the pages directory, the _id directory (for the product)
in the _id directory, files like _route.vue (for tabs)
I do transitions to tabs by clicking on a and pushing to $router
It should look like this localhost:3000/goods/1/tab-name
And it works, BUT I

ran into a problem that I have several tabs that display the same content, although they should be different.
these tabs start with R. Maybe that's the problem?

I think exact should be added.
But how to leave everything as it is?

I tried to use nuxt-link, but how can I pass the path to to while keeping the id? to=`${item.id}/tab-name` doesn't work.

Or maybe what I'm doing is a crutch and there is a better solution?

Thank you for your time)))

Answer 1

solved a problem.
In the _id directory,
it was necessary to set routes not through _route.vue, but simply through route.vue and everything began to work well.
I’ll leave the question open for a little more time, maybe someone will suggest a more convenient solution, it’s just that now there is a drawback that the page is loading, it’s not long, but noticeable, especially considering the load (if the store was in production) I
’m inspired by the restore store.
https://www.re-store.ru/catalog/MWHM2RU-A/spec/
They have the same tabs, but only the tabs component is updated, how to implement this? code-splitting? (xs like them, there is Bitrix)