Вложенные макеты в Inertia

Пусть у сайта уже есть общая шапка, а внутри раздела кадров нужна вторая полоска с вкладками отделов. Один компонент макета не разделит эти слои: шапка должна жить на всех адресах, а вкладки - только на экранах HR.

Inertia принимает массив компонентов в опции layout. Первый элемент - внешняя оболочка, следующий вкладывается внутрь. Оба экземпляра остаются постоянными между переходами, если страница снова указывает тот же набор.

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

<template>
	<nav>
		<a href="/hr/staff">Staff</a>
		<a href="/hr/reports">Reports</a>
	</nav>
	<section>
		<slot />
	</section>
</template>

Давайте на странице списка укажем пару макетов - сайт и раздел:

<script setup>
	import AppLayout from '@/Layouts/AppLayout.vue'
	import HrLayout from '@/Layouts/HrLayout.vue'

	defineOptions({
		layout: [AppLayout, HrLayout],
	})
</script>

<template>
	<h1>Staff</h1>
</template>

Сделайте экран отчёта Finance так, чтобы он открывался внутри общего каркаса сайта и ещё одной рамки раздела с вкладками бюджета.