Чтобы выполнить динамическую маршрутизацию с подстановкой slug в Nuxt 3, тебе нужно внести несколько изменений в вашу текущую настройку.
Создайте новый файл в каталоге /pages вашего проекта Nuxt, например /pages/blog/_slug.vue. Этот файл будет обрабатывать маршрутизацию постов вашего блога, используя slug вместо ID.
В разделе сценария этого нового файла тебе нужно будет использовать хук useDirectusItems из дополнения nuxt-directus для получения данных о записях блога из бэкенда. Вместо метода getItemById тебе нужно будет использовать метод getItems и передать объект filter для фильтрации данных на основе slug.
<script>
const { getItems } = useDirectusItems();
const route = useRoute();
const post = await getItems({
коллекция: "blog",
params: {
фильтр: { slug: route.params.slug }
}
});
</script>
В файле nuxt.config.js необходимо обновить свойство generate для обработки динамической маршрутизации для нового файла /_slug.vue.
generate: {
routes: function() {
return axios.get('http://your-backend-url/items/blog')
.then((res) => {
return res.data.data.map((post) => {
return '/blog/' + post.slug
})
})
}
},
Наконец, тебе нужно будет обновить ссылки в проекте Nuxt, чтобы они указывали на новые маршруты, используя slug, а не ID.
После этих изменений посты вашего блога должны быть доступны с использованием slug в URL, а маршрутизация будет осуществляться динамически на основе данных из бэкенда.