Как реализовать динамическую маршрутизацию в приложении Nuxt.js и можете привести пример?

Динамическая маршрутизация в Nuxt.js позволяет создавать страницы с переменным контентом, основываясь на параметрах URL. Это особенно полезно для отображения данных на основе идентификаторов или других параметров.

Шаги для реализации динамической маршрутизации в Nuxt.js

Пример реализации динамической маршрутизации

mkdir -p pages/users
touch pages/users/_id.vue

<template>
  <div>
    <h1>Профиль пользователя</h1>
    <p>ID пользователя: {{ userId }}</p>
    <p>Имя: {{ user.name }}</p>
    <p>Электронная почта: {{ user.email }}</p>
  </div>
</template>

<script>
export default {
  async asyncData({ params }) {
    const userId = params.id;
    const response = await fetch(`https://api.example.com/users/${userId}`);
    const user = await response.json();

    return { userId, user };
  }
}
</script>

Как это работает?

• Dynamic Route: Мы создали файл _id.vue, что означает, что любой URL, соответствующий users/<id>, будет отображать эту страницу. Например, /users/1 будет отображать профиль пользователя с ID 1.
• asyncData: В методе asyncData, нам передается объект контекста, из которого мы извлекаем параметры маршрута (params). В данном случае, мы берем id пользователя. Мы затем используем этот id для запроса к API и получения данных пользователя. Эти данные будут доступны в компоненте через this.user.

Заключение

Таким образом, динамическая маршрутизация в Nuxt.js позволяет легко создавать страницы с контентом, который изменяется в зависимости от URL. Это делает ваш сайт более интерактивным и полезным. Надеюсь, этот пример был полезен для понимания основ динамической маршрутизации!