Для создания динамической страницы для большого количества постов в Nuxt.js, вам следует использовать параметры маршрутизации и API для получения данных.
1. Настройте параметры маршрутизации:
В файле pages создайте директорию posts и внутри нее файл _id.vue. Внутри этого файла определите шаблон страницы для отдельного поста.
Пример кода:
<template>
<div>
<h1>{{ post.title }}</h1>
<p>{{ post.content }}</p>
</div>
</template>
<script>
export default {
async asyncData({ params }) {
const { id } = params
const res = await fetch(`https://api.example.com/posts/${id}`)
const post = await res.json()
return {
post
}
}
}
</script>
2. Получите данные из API:
В этом примере мы используем fetch для получения данных из API. Замените https://api.example.com/posts/${id} на свой URL API.
3. Отобразите список постов:
Создайте файл pages/posts/index.vue, где вы будете отображать список постов.
Пример кода:
<template>
<div>
<h1>Список постов</h1>
<ul>
<li v-for="post in posts" :key="post.id">
<nuxt-link :to="`/posts/${post.id}`">{{ post.title }}</nuxt-link>
</li>
</ul>
</div>
</template>
<script>
export default {
async asyncData() {
const res = await fetch('https://api.example.com/posts')
const posts = await res.json()
return {
posts
}
}
}
</script>
4. Получите список постов из API:
Как и в предыдущем примере, мы используем fetch для получения списка постов из API.
5. Добавьте ссылки на динамические страницы:
Используйте v-for для отображения списка постов и nuxt-link для создания ссылок на каждую динамическую страницу.
Пример кода:
<li v-for="post in posts" :key="post.id">
<nuxt-link :to="`/posts/${post.id}`">{{ post.title }}</nuxt-link>
</li>
В этом примере мы используем post.id для создания динамической ссылки. Вы можете использовать любое значение из API, которое уникально и идентифицирует каждый пост.
Теперь у вас должна быть динамическая страница для большого количества постов в Nuxt.js. Обратите внимание, что код выше является примером, и вы должны адаптировать его под свои потребности и структуру вашего проекта.