Посредник страницы в Nuxt

Перед показом страницы Nuxt может вызвать вашу функцию проверки. Её кладут в app/middleware, а страница ссылается на имя файла без расширения. Так же, как поле layout в definePageMeta, поле middleware связывает конкретный экран с одним посредником.

Давайте разберём минимальную связку: файл gate.js и страница desk.vue. Посредник получает объект целевого маршрута to и может прочитать to.path. Пока он ничего не возвращает, переход не прерывается и страница открывается как обычно. Редирект через функцию navigateTo разберём отдельно в этом разделе.

Чтобы результат проверки был виден на экране, посредник запишет путь в общее состояние useState, а страница выведет его в шаблоне:

/app/
- /middleware/
  - gate.js
- /pages/
  - desk.vue

Код посредника:

export default defineNuxtRouteMiddleware((to) => {
	const gatePath = useState('gatePath', () => '');
	gatePath.value = to.path;
});

При переходе на /desk сначала отработает gate.js, затем смонтируется шаблон. Имя gate в definePageMeta совпадает с gate.js. Подключим посредник на странице и покажем сохранённый путь:

<script setup>
	definePageMeta({
		middleware: 'gate',
	});
	
	const gatePath = useState('gatePath');
</script>
<template>
	<h1>
		Desk
	</h1>
	<p>
		Middleware path: {{ gatePath }}
	</p>
</template>

Сделайте посредник staff и подключите его к странице работников так, чтобы при открытии адреса работников страница всё равно отображалась.

На той же странице работников выведите в шаблоне путь, который посредник прочитал из to.path, через общее состояние.