Как реализовать динамические табы в nuxt с использованием роутинга?

Question

[mops2]

Всем привет, начал изучать nuxt js, решил создать на нем тестовый интернет-магазин.

У меня есть страница определенного товара, на которой есть табы.
Эти табы должны работать вместе с vue-router, что бы было удобно пользователям (можно было скинуть ссылку на определенный контент)

Моя реализация таких табов:
в каталоге pages каталог _id (для товара)
в каталоге _id файлы типа _route.vue (для табов)
переходы на табы я делаю по клику на a и push в $router
Должно получиться примерно так localhost:3000/goods/1/tab-name
И это работает, НО

столкнулся с проблемой, что у меня есть несколько табов, который отображают одинаковый контент, хотя должны разный.
эти табы начинаются на R. Возможно проблема в этом?

Я думаю, что нужно добавить exact.
Но как, что бы все оставить как есть?

Пробывал использовать nuxt-link, но как передать в to путь с сохранением id? to=`${item.id}/tab-name` не работает.

А может что я делаю - костыль и есть более оптимальное решение ?

Спасибо за уделенное время)))

Comments

[Алексей Ярков]

ID таба лучше писать в hash и отображать нужный таб, если hash в урле присутствует.

[mops2]

для этого придется создавать каждому табу уникальный хеш (забыл сказать кстати, контент для табов берется из json), а этого бы не хотелось делать.
+ хотелось бы, если возможно, оставить именно такую структуру. Если это возможно, конечно))
Что бы человек мог скинуть ссылку, допустим, siteName/goods/456/description
А так возьму на заметку, спасибо

Answer 1

[mops2]

решил проблему.
В каталоге _id
нужно было задавать роуты не через _route.vue, а просто route.vue и все стало работать хорошо.

Оставлю ещё немного времени вопрос открытым, может кто-то подскажет более удобное решение, просто сейчас есть недостаток, что страница грузится, это не долго, но заметно, особенно если учитывать нагрузку (если б магазин был в продакшене)

Вдохновляюсь магазином restore.
https://www.re-store.ru/catalog/MWHM2RU-A/spec/
У них такие же табы, но обновляется только компонент табов, как это реализовать? Code-splitting? (хз как у них, там битрикс)

Comments

[Игорь]

_route.vue это $route.params.route