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

Как передавать уникальный идентификатор для каждого продукта и использовать его в маршруте для отображения детальной информации о продукте с помощью компонента ProductView?
  • 20 мая 2024 г. 21:10
Ответы на вопрос 2
В Nuxt 3 можно настроить динамический маршрут, используя для этого параметр в файле `nuxt.config.js`. 

Для передачи уникального идентификатора для каждого продукта и использования его в маршруте для отображения детальной информации о продукте, можно создать динамический маршрут с параметром, который будет представлять идентификатор продукта. Например, можно создать маршрут в файле `pages/products/_id.vue`, где `_id` будет параметром для передачи уникального идентификатора.

Внутри компонента `ProductView` можно получить уникальный идентификатор продукта из параметров маршрута и использовать его для получения детальной информации о продукте. Например, можно использовать `this.$route.params.id` для получения идентификатора из маршрута и затем запросить данные продукта по этому идентификатору из API.

Пример динамического маршрута в файле `pages/products/_id.vue`:

```javascript
<template>
  <div>
    <h1>Product Detail Page</h1>
    <p>{{ product.name }}</p>
    <p>{{ product.price }}</p>
  </div>
</template>

<script>
export default {
  async asyncData({ params }) {
    // Получаем идентификатор продукта из параметров маршрута
    const productId = params.id;

    // Запрашиваем данные продукта по идентификатору из API
    const product = await fetch(`https://api.example.com/products/${productId}`).then(res => res.json());

    return { product };
  }
};
</script>
```

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

В компоненте product-[id].vue id будет доступен в $route.params.id
Похожие вопросы