Яндекс.Метрика
qr-код - Как-то так стрелка - Как-то так
Ведущий экономист + ... пиктограмма - Как-то Так THIS     Экономическая грамотность и web-решения
Всё по теме: что, как и почему. Актуальные вещи - своими словами.
Повышайте своё качество WITH ME - СПЭМ !
Если тебе не нравится то, что ты получаешь, измени то, что ты даешь. © Карлос Кастанеда     KAKTOTAK.BY - услуги по экономическому проектированию и web-разработке (php/js - telegram, WordPress, Laravel, Vue, SEO)    Кооперация - на постоянной основе    Будь в теме   -    ПОДПИШИСЬ      Мои заметки - ЭКОНОМИКА +  и  Справочник WEB-разработчика | php+js+seo   в Telegram   telegram  

Как передать данные редиректом из контроллера во Vue-компонент

Шаг 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-компоненте.

Administrator
149

Конвертер валют
RUB RUB-icon
USD USD-icon
EUR EUR-icon
CNY CNY-icon
BYN BYN-icon
UAH UAH-icon
KZT KZT-icon
SHORT - о чём речь
ЭКОНОМИЧЕСКАЯ ГРАМОТНОСТЬ
Хочу Всё Знать. Полезные Советы