@Esm322

Как составить динамический маршрут в Nuxt 3?

Подскажите, пожалуйста, как составить динамический маршрут для страницы?
В pages лежит ProductView, который должен отображать детально продукт. Переход происходит в компоненте ProductItem:
//ProductItem.vue
<li class="catalog__item">
    <NuxtLink :to="{name: 'ProductView', params: { id }}" class="catalog__pic">
      <img :src="props.image" :alt="props.name">
    </NuxtLink>

    <h3 class="catalog__title">
      <a>
        {{ props.name }}
      </a>
    </h3>

    <span class="catalog__price">
      {{ props.price }}
    </span>

    <ul class="colors colors--black">
      <li class="colors__item">
        <label class="colors__label">
          <input class="colors__radio sr-only" type="radio" :name="'colour-' + props.colourText"
            :value="props.colourId">
          <span class="colors__value" :style="{'background-color': props.colourText}">
          </span>
        </label>
      </li>
    </ul>
  </li>


Директория pages:
|pages
-|index.vue
-|MainView.vue
-|ProductView.vue

Как добавить id в маршрут ProductView?
  • Вопрос задан
  • 96 просмотров
Решения вопроса 1
kossmos
@kossmos
Frontend разработчик
Через квадратные скобки. ProductView переименуйте в /pages/product-[id].vue - тогда в браузере вы получите адрес карточки товара //www.ru/product-123/

В компоненте product-[id].vue id будет доступен в $route.params.id
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы