Строка запроса на клиенте в Nuxt

Не все настройки экрана удобно класть в сегменты пути. Поиск, фильтр или выбранная вкладка часто живут в строке запроса: после ? идут пары «имя=значение», например /search?q=table. Такой адрес можно отправить коллеге или сохранить в закладках вместе с выбранным запросом.

Давайте разберём, как прочитать эти поля в браузере. Объект маршрута из функции useRoute содержит поле query. Ключи в нём совпадают с именами параметров в адресе, значения приходят строками. Если параметра нет, обращение к ключу даст undefined, и это удобно учитывать в шаблоне.

Страница поиска покажет слово из параметра q:

<script setup>
	const route = useRoute();
	const searchText = computed(() => route.query.q ?? '');
</script>
<template>
	<h1>
		Search
	</h1>
	<p v-if="searchText">
		Query: {{ searchText }}
	</p>
	<p v-else>
		No query yet.
	</p>
</template>

Откроем /search?q=table - под заголовком появится строка Query: table. Без ?q=... страница покажет запасной текст. При клиентском переходе на другой адрес с другим query компонент пересчитает route.query так же, как при первой загрузке.

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

Сделайте страницу архива, которая показывает год из строки запроса при адресе вида /archive?year=2024.