Несколько параметров роута в Nuxt

Адрес может содержать не один, а несколько изменяемых сегментов. Например, /users/3/posts/10 задаёт id пользователя и id записи в одном URL.

Для каждого такого сегмента в Nuxt создают папку с именем в квадратных скобках. Имена в скобках становятся ключами в объекте params.

Структура для примера с пользователем и постом:

/app/
- /pages/
  - /users/
    - [userId]/
      - /posts/
        [postId].vue

Давайте прочитаем оба параметра через функцию useRoute:

<script setup>
	const route = useRoute();
</script>
<template>
	<p>
		user {{ route.params.userId }},
		post {{ route.params.postId }}
	</p>
</template>

Проверим адрес /users/3/posts/10 в браузере - на странице появятся оба значения.

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

Сделайте роут для адресов вида /shop/:region/:store и выведите оба параметра на странице.

Сделайте роут /order/:orderId/item/:itemId с выводом обоих id в шаблоне.