Динамический роут в Nuxt

В Nuxt можно создавать динамические роуты. Такие адреса предполагают, что один сегмент пути может меняться. Например, в /users/1 вместо единицы может стоять любой id пользователя.

Не нужно заводить отдельный файл для каждого числа. Достаточно взять имя папки в квадратные скобки. Тогда все адреса вида /users/что-угодно обработает один файл страницы.

Структура для нашего примера:

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

Давайте сделаем страницу пользователя:

<template>
	<p>
		user
	</p>
</template>

Значение сегмента из адреса нужно прочитать в коде страницы. Для этого в Nuxt есть функция useRoute. Она возвращает объект текущего маршрута; параметры лежат в поле params.

Подключим useRoute и выведем id в шаблоне:

<script setup>
	const route = useRoute();
</script>
<template>
	<p>
		user {{ route.params.id }}
	</p>
</template>

Введём в браузере /users/5 - на странице появится соответствующий id.

Сделайте роут, обрабатывающий адреса вида /city/:name, где вместо :name может быть любая строка.

Сделайте роут, обрабатывающий адреса вида /post/:id, где вместо :id может быть любое число.

Пусть дан следующий массив:

<script setup>
	const posts = [
		'post1',
		'post2',
		'post3',
		'post4',
		'post5',
	];
	
	const route = useRoute();
</script>
<template>
	<p></p>
</template>

Сделайте так, чтобы в зависимости от значения параметра id в верстке страницы выводился соответствующий пост.

Сделайте роут, обрабатывающий адреса вида /prod/:id, где вместо :id может быть любое число.

Пусть дан следующий массив:

<script setup>
	const prods = [
		{
			id: 1,
			name: 'prod1',
			cost: 100,
		},
		{
			id: 2,
			name: 'prod2',
			cost: 200,
		},
		{
			id: 3,
			name: 'prod3',
			cost: 300,
		},
	];
	
	const route = useRoute();
</script>
<template>
	<p></p>
</template>

Сделайте так, чтобы в зависимости от значения параметра id в верстке страницы выводился соответствующий продукт.