Frontend

Дабы добавить frontend составляющую страницы, вам необходимо создать файл с расширением .vue (желательно поместить его в одну из поддиректорий директории /resources/assets/js/templates) и добавить в него следующее содержимое:

<template>
    <!-- HTML-разметка страницы -->
</template>

<script>
    import loader from './../../core/http/loader' // Импорт системного модуля маршрутизации. Относительный путь должен указывать на файл resources/assets/js/core/http/loader.js

    export default {
        data() {
            //
        },
        beforeRouteEnter (to, from, next) {
            loader.beforeRouteEnter('/spa/example', to, from, next); // Здесь указывается URL к которому будет выполняться ассинхронный запрос для получения данных с сервера. Изменить на нужный вам.
        },
        beforeRouteUpdate (to, from, next) {
            loader.beforeRouteUpdate('/spa/example', to, from, next, this); // Здесь указывается URL к которому будет выполняться ассинхронный запрос для получения данных с сервера. Изменить на нужный вам.
        },
        methods: {
            setData(response) {
                const data = response.data; // Переменная содержит js-объект данных, принятых с сервера.
            }
        }
    }
</script>

В методах beforeRouteEnter() и beforeRouteUpdate() вам необходимо указать url на который будет производиться запрос для получения данных с сервера. В вашем случае, потребуется указать url laravel-роута, который вы добавили при создании backend составляющей страницы. Вы только что создали, так называемый, Vue-компонент.

Далее, перейдите в файл resources/assets/js/routing/routes.js и проделайте следующее:

Импортируйте только что созданный компонент, затем, в экспортируемый из файла массив добавьте объект со следующей структурой:

Last updated