Текущая ссылка в Inertia

Давайте теперь посмотрим на шапку с несколькими пунктами. Все они выглядят одинаково, и не видно, какой экран сейчас открыт.

Текущий адрес лежит в $page.url. Его сравнивают с адресом ссылки и задают отдельный класс активному пункту.

Давайте обновим макет с двумя ссылками и коротким стилем для активного пункта:

<script setup>
	import { Link } from '@inertiajs/vue3'
</script>

<template>
	<header>
		<Link href="/">Home</Link>
		<Link
			href="/posts"
			:class="{ active: $page.url === '/posts' }"
		>
			Posts
		</Link>
	</header>
	<main>
		<slot />
	</main>
</template>

<style>
	.active {
		font-weight: bold;
	}
</style>

Подсветите в шапке пункт работников, когда открыт именно их список.