Навигация в Inertia

Давайте рассмотрим ситуацию, когда в подвале нужно показывать текущий адрес страницы, и строка должна обновляться не только после нового ответа сервера, но и когда человек нажимает «назад» и Inertia восстанавливает снимок из истории без запроса.

Событие navigate срабатывает при успешной смене страницы и при навигации по истории. Оно шире, чем success, которое не вызывается на чисто историческом переходе. В обработчике снова доступен объект страницы с актуальным адресом.

Давайте отдадим список и страницу архива:

<?php
	use Illuminate\Support\Facades\Route;
	use Inertia\Inertia;

	Route::get('/posts', function () {
		return Inertia::render('Posts/Index', [
			'title' => 'Posts',
		]);
	});

	Route::get('/posts/archive', function () {
		return Inertia::render('Posts/Archive', [
			'title' => 'Archive',
		]);
	});
?>

Давайте запишем последний адрес из navigate в общий ref:

import { router } from '@inertiajs/vue3'
import { ref } from 'vue'

export const lastUrl = ref('')

router.on('navigate', (event) => {
	lastUrl.value = event.detail.page.url
})

Давайте выведем заголовок, ссылку и строку адреса внизу экрана:

<script setup>
	import { Link } from '@inertiajs/vue3'
	import { lastUrl } from '../../app.js'

	defineProps({
		title: String,
	})
</script>

<template>
	<h1>{{ title }}</h1>
	<Link href="/posts/archive">
		Open archive
	</Link>
	<footer v-if="lastUrl">
		{{ lastUrl }}
	</footer>
</template>

Сделайте переход к отчёту работника Omar так, чтобы подвал показывал актуальный адрес и после ссылки, и после возврата кнопкой «назад» в браузере.