@mops2

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

Всем привет, начал изучать 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` не работает.

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

Спасибо за уделенное время)))
  • Вопрос задан
  • 73 просмотра
Решения вопроса 1
@mops2 Автор вопроса
решил проблему.
В каталоге _id
нужно было задавать роуты не через _route.vue, а просто route.vue и все стало работать хорошо.

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
27 окт. 2020, в 15:42
1000 руб./в час
27 окт. 2020, в 15:30
100000 руб./за проект
27 окт. 2020, в 15:28
100000 руб./за проект