Для создания полудинамического маршрута в Nuxt.js вам понадобится использовать некоторые его функции и возможности. В основе такого роутинга лежит динамический маршрут, который можно параметризовать, а затем добавить некоторую статическую часть.
Давайте рассмотрим пример. Предположим, у вас есть приложение, которое отображает информацию о пользователе. У каждого пользователя есть уникальный идентификатор, и вы хотите, чтобы URL был вида: /users/123, где 123 - это идентификатор пользователя.
1. Создайте страницу users/_id.vue в папке pages. Здесь _id является динамическим сегментом URL. В этом файле вы можете добавить логику для получения данных о пользователе с использованием этого идентификатора.
<template>
<div>
<h1>User Details</h1>
<p>{{ user.name }}</p>
<p>{{ user.email }}</p>
</div>
</template>
<script>
export default {
async asyncData({ params }) {
// params содержит параметры маршрута, в нашем случае { id: '123' }
const userId = params.id
// Здесь вы можете выполнить логику для получения данных пользователя, используя `userId`
const user = await getUserById(userId)
return { user }
}
}
</script>
2. В файле nuxt.config.js добавьте переопределение для роута users/_id.vue в вашем массиве routes.
export default {
// ...
router: {
extendRoutes(routes, resolve) {
routes.push({
name: 'user',
path: '/users/:id',
component: resolve(__dirname, 'pages/users/_id.vue')
})
}
}
// ...
}
Обратите внимание, что мы добавляем переопределение роута с именем user, с путем /users/:id и компонентом pages/users/_id.vue.
3. Теперь вы можете использовать nuxt-link или router.push для навигации по полудинамическим маршрутам.
<template>
<div>
<h1>Users</h1>
<ul>
<li v-for="user in users" :key="user.id">
<!-- Используйте `nuxt-link` для навигации -->
<nuxt-link :to="`/users/${user.id}`">{{ user.name }}</nuxt-link>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
users: [
{ id: 1, name: 'John' },
{ id: 2, name: 'Jane' },
{ id: 3, name: 'Doe' }
]
}
}
}
</script>
Теперь при нажатии на ссылку будет осуществляться навигация на соответствующую страницу с информацией о пользователе.
Таким образом, вы можете создавать полудинамические маршруты в Nuxt.js, добавляя динамические сегменты к вашему URL и обрабатывая их в соответствующем компоненте. Это позволяет создавать более гибкие и динамичные приложения.