Текущий путь в Nuxt

В шапке или хлебных крошках часто нужно показать, где пользователь находится сейчас. Полный URL с https:// и именем хоста для этого избыточен: достаточно пути внутри сайта, например /catalog или /profile/settings.

Давайте познакомимся с тем, как прочитать такой путь в коде страницы. Функция useRoute возвращает объект текущего маршрута. Помимо параметров сегментов, у него есть поле path: строка пути без origin, ровно то, что идёт после домена в адресной строке браузера.

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

<script setup>
	const route = useRoute();
</script>
<template>
	<h1>
		Catalog
	</h1>
	<p>
		Current path: {{ route.path }}
	</p>
</template>

При открытии /catalog в шаблоне появится та же строка. Если позже пользователь перейдёт на другой роут через NuxtLink, компонент новой страницы получит свой useRoute с обновлённым path.

Тот же приём подойдёт для отладки или подписи «You are here» в layout, если вызвать useRoute в файле макета: path всегда отражает активную страницу.

Сделайте страницу работников, на которой выводится текущий путь этого адреса.

Сделайте страницу отчётов с подписью Report route и строкой пути под заголовком. Проверьте значение при адресе /reports.