Параметр в адресе запроса в Nuxt

Часто одна запись на сайте открывается по адресу с id в пути, а данные для карточки лежат на API по тому же id. Параметр маршрута и сегмент URL запроса должны меняться вместе, когда пользователь переходит с /users/1 на /users/2.

Давайте разберём страницу одного пользователя. Файл лежит в динамической папке:

/app/
- /pages/
  - /users/
    - [id].vue

Прочитаем id через useRoute и передадим его в функцию useFetch. Адрес запроса зададим функцией, чтобы он пересчитывался при смене параметра. При открытии /users/1 в шаблоне появится имя из ответа, а смена id в адресе запустит новый запрос:

<script setup>
	const route = useRoute();
	
	const { data } = await useFetch(
		() =>
			'https://jsonplaceholder.typicode.com/users/' +
			route.params.id,
	);
</script>
<template>
	<p>
		{{ data?.name }}
	</p>
</template>

Сделайте страницу города по шаблону /cities/:slug с данными с тестового API.

Сделайте страницу поста по шаблону /posts/:id, которая показывает заголовок поста из ответа сервера.