Параметр страницы в Nuxt

Динамические страницы передают сегмент пути в поле params объекта маршрута. Посредник получает тот же объект to, что и при чтении to.path, поэтому значение id для /users/3 лежит в to.params.id ещё до монтирования [id].vue.

Давайте познакомимся с проверкой параметра на примере пользователей. Файл user.js отклонит id 0 и отправит на список, остальные значения пропустит:

export default defineNuxtRouteMiddleware((to) => {
	const id = to.params.id;
	
	if (id === '0') {
		return navigateTo('/users');
	}
});

Адрес /users/3 покажет заголовок User 3, а /users/0 уйдёт на /users. Параметры в to.params строки, поэтому сравнение с '0'. Страница профиля подключает посредник и выводит id в шаблоне:

<script setup>
	definePageMeta({
		middleware: 'user',
	});
	
	const route = useRoute();
</script>
<template>
	<h1>
		User {{ route.params.id }}
	</h1>
</template>

Сделайте динамическую страницу городов и посредник city, который при id 0 отправляет на /cities, а при других значениях оставляет переход.

Сделайте страницу списка cities с заголовком Cities, чтобы редирект был заметен в браузере.