Замена адреса в Nuxt

Обычный вызов функциюа navigateTo с новым адресом ведёт себя как клик по NuxtLink: страница меняется, а в истории вкладки добавляется ещё один шаг. Кнопка «назад» в браузере вернёт на предыдущий URL. Это удобно, когда каждый экран - отдельный этап работы пользователя.

Давайте изучим другой вариант. Иногда текущий адрес - временный: экран выбора города, промежуточный шаг мастера или страница «подождите». После успешного действия логичнее заменить этот адрес целевым, чтобы «назад» не возвращал на уже не нужный шаг. В функции navigateTo для этого служит опция replace со значением true: новый маршрут открывается, но запись в истории подменяется, а не дополняется.

Кнопка на главной заменит адрес на каталог:

<script setup>
	function goCatalogWithoutHistoryStep() {
		navigateTo('/catalog', { replace: true });
	}
</script>
<template>
	<h1>
		Home
	</h1>
	<button type="button" @click="goCatalogWithoutHistoryStep">
		Open catalog
	</button>
</template>

Страница app/pages/catalog.vue должна существовать. После нажатия адрес станет /catalog, но если до этого пользователь уже был на главной, одно нажатие «назад» уйдёт не на / повторно, а на страницу, которая была до главной. С обычным navigateTo без опции пришлось бы дважды нажимать «назад», чтобы выйти из цепочки.

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

Сделайте страницу «Setup complete», которая по кнопке «Continue» переводит на /dashboard без сохранения промежуточного адреса в истории.