Шаг 1: Подготовка на стороне Laravel
Контроллер
В контроллере Laravel обрабатываем логику и используем метод with()
для передачи данных в сессию. Например:
public function someAction()
{
// Обработка логики...
// Например, доступ пользователю запрещён, и мы перенаправляем его на страницу авторизации
// Храним сообщение в сессии
return redirect('/some-route')->with('message', 'Данные успешно переданы!');
}
Передача данных в представление
Убеждаемся, что данные, переданные в сессии, передаются в целевой конроллер в соотвествии с указанным route (маршрутом - /some-route). Например:
public function showLogin(): Response
{
return Inertia::render('Auth/Login', [
'message' => session('message'), // Передаём данные из сессии
]);
}
Шаг 2: Получение данных на стороне Vue
Используем script setup
Composition API для получения пропсов
Открываем компонент, в который хотим передать данные.
Так как мы передаём данные напрямую в свой компонент в виде пропсов, мы можем просто обратиться к ним без использования usePage :
<template>
<div>
<div v-if="message" class="alert alert-info">
{{ message }}
</div>
<h1>Добро пожаловать!</h1>
</div>
</template>
<script setup>
// <![CDATA[
// Принимаем пропсы
defineProps({
message: {
type: String,
},
});
// ]]>
</script>
Теперь, когда мы переходим на страницу, информация из сессии будет показана в нашем Vue-компоненте.