Vue3: Загрузка страниц сайта без перезагрузки (загружать из API)

Здраствуйте Есть сайт vc.ru, при переходе по страницам выполняется ajax запрос вида "урл_текущей_страницы?mode=ajax" (пример https://vc.ru/new?mode=ajax), возвращает json c тремя основными параметрами:

  1. module.page - содержит данные о контенте загружаемой страницы
  2. module.ajaxify - содержит title, meta, и разные заголовки страницы
  3. module.sidebar - боковое меню сайта
  4. module.auth - данные о текущем клиенте

По выполнению ajax сайт получает данный json и обновляет DOM элементы, собственно заголовок, meta, сайдбар и тд, без перезагрузок. И создаётся эффект перехода на другую страницу без перезагрузки. Как такое реализовано? Известно что на Vue и собственном php Фреймворке Osnova

Я пробовал сделать подобное, но ничего путного не вышло

Я же использую Laravel 8 версии и Vue 3, запускаю через Docker локально, и даже сделал автоматическое развёртывание у себя на сервере по обновлению в github (то бишь pipeline), не знаю зачем но могу дать домен, он роли не играет Сервер демо, важных файлов нет, и пока не парюсь о безопасности, взял для изучения Vue, для удобства. seeyan.hexlet-learn.site

Что я сделал сейчас:

Я создал Vue компонент, который ожидает параметра Url, он делает запрос на этот url и ожидает json.component, Vue.createElement преобразует уже в html и выводит, но это в теории, но ничего не работает

<script>
export default {
    mounted() {
        this.load();
    },
    props: ['page'],
    data () {
        return {
            components: '',
        }
    },
    render: function (createElement) {
        return createElement(
            this.components
        );
    },
    methods: {
        load: function (){
            var v = this;
            v.$http
                .get(this.page)
                .then(function(resp) {
                    v.components = resp.data.components;
                })
                .catch(function(error) {
                    document.getElementById('error').write(error.toString());
                });
        }
    }
}
</script>

v.$http - это axios


Ответы (0 шт):