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

Question

[Esm322]

Подскажите, пожалуйста, как составить динамический маршрут для страницы?
В 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?

Answer 1

[Юрий Кравчук]

Через квадратные скобки. ProductView переименуйте в /pages/product-[id].vue - тогда в браузере вы получите адрес карточки товара //www.ru/product-123/

В компоненте product-[id].vue id будет доступен в $route.params.id

Comments

[Esm322]

А как обращаться теперь к нему в NuxtLink, name: 'product' или 'name: product-'.? Потому что, когда указываю NuxtLink, то выводит ошибку, что No match for {"name":"product","params":{"id":"202347221"}}

[Юрий Кравчук]

В девтулз можно посмотреть, но работать должно product-id

[Esm322]

Юрий Кравчук, Большое спасибо, всё заработало как только изменил на name: 'product-id'