Строка запроса в Nuxt

Поиск и фильтры часто передают условие не в пути, а в строке запроса после знака вопроса. Например, /users?q=leanne должен показывать только подходящих пользователей. Значение q лежит в route.query того же функции useRoute, что и параметры пути.

Давайте изучим страницу списка пользователей с фильтром по имени. Прочитаем route.query.q и передадим его в опцию query функции useFetch, чтобы при смене адреса запрос выполнялся заново с новым значением. Тестовый API отдаёт полный список, поэтому на странице оставляем имена, где встречается текст из q, например /users?q=leanne:

<script setup>
	const route = useRoute();
	
	const { data } = await useFetch(
		'https://jsonplaceholder.typicode.com/users',
		{
			query: computed(() => ({
				q: route.query.q,
			})),
		},
	);
	
	const visible = computed(() => {
		const items = data.value ?? [];
		const needle = String(
			route.query.q ?? '',
		).toLowerCase();
		
		if (!needle) {
			return items;
		}
		
		return items.filter((user) =>
			user.name
				.toLowerCase()
				.includes(needle),
		);
	});
</script>
<template>
	<ul>
		<li
			v-for="user in visible"
			:key="user.id"
		>
			{{ user.name }}
		</li>
	</ul>
</template>

Сделайте страницу /products с параметром q в адресе, который фильтрует список товаров с тестового API по названию.

Проверьте, что смена q в строке браузера меняет состав списка без перезагрузки всего приложения вручную.