Шаг назад в Nuxt

Кнопка «назад» в браузере опирается на стек истории вкладки. В SPA на Nuxt каждый переход через NuxtLink или navigateTo обычно добавляет запись в этот стек. Интерфейс сайта может повторить то же действие из своей кнопки «Back» или «Cancel», не заставляя искать стрелку в панели браузера.

Давайте разберём функцию useRouter. Она даёт доступ к управлению навигацией на клиенте. Метод back у полученного объекта эквивалентен одному шагу назад в истории: если пользователь пришёл с каталога на карточку товара, вызов вернёт его на каталог при условии, что между адресами не было замены записи истории.

Страница детали заказа с кнопкой возврата:

<script setup>
	const router = useRouter();
	
	function goBack() {
		router.back();
	}
</script>
<template>
	<h1>
		Order details
	</h1>
	<button type="button" @click="goBack">
		Go back
	</button>
</template>

Сначала откроем список заказов, перейдём на конкретный заказ через NuxtLink, затем нажмём «Go back» - адрес снова станет списком. Если истории нет, например страницу открыли по прямой ссылке, поведение зависит от браузера и может совпасть с уходом с сайта или остаться на месте.

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

Сделайте страницу настроек профиля с кнопкой «Cancel», возвращающей на шаг назад после перехода из другого раздела сайта.