Vue3: Как сделать сайт без перезагрузки (загружать из API)?

Question

danilo9 @danilo9

Vue.js

Vue3: Как сделать сайт без перезагрузки (загружать из API)?

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

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

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

Я же использую Laravel 8 версии и Vue 3, запускаю через Docker локально, и даже сделал автоматическое развёртывание у себя на сервере по обновлению в github (то бишь pipeline).

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

Я создал 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

Вопрос задан более двух лет назад
293 просмотра

Комментировать

Подписаться 2 Простой Комментировать

Решения вопроса 1

4 комментария

danilo9 @danilo9 Автор вопроса

Разве роутер является выходом? Я его уже использовал, но ничего не видел про работу с APi сайта.
Да router меняет url, но он ничего не сможет загрузить

Пример:

<!DOCTYPE html>
<html>
<head>
<title>Маршрутизация во Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <router-view></router-view>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/vue-router@next"></script>
<script>
const NotFound = { template: '<h2>Страница не найдена</h2>' }
const Home = { template: 
    `<h2>Home Page</h2>
    <div><button @click="navigate">Best Phone</button></div>` ,
    methods: {
        navigate(){
            router.push({ name: 'product', params: { cat: 'phone' }, query:{id: '1'} });
        }
    }
}
const Product = { 
    template: `<h2>Product</h2>
    <h3>Category: {{$route.params.cat}}</h3>
    <h3>Id: {{$route.query.id}}</h3>` 
}
  
const routes = [
    { path: '/', component: Home },
    { path: '/products/:cat', component: Product, name:'product'},
    { path: '/:pathMatch(.*)*', component: NotFound  }
];
const router = VueRouter.createRouter({
  history: VueRouter.createWebHistory(),
  routes,
});
 
const app = Vue.createApp({});
app.use(router);    
app.mount('#app');
</script>
</body>
</html>

Написано более двух лет назад

pLavrenov @pLavrenov

danilo9, роутер грузит компонент, этот компонет получает данные через Api и отображает контент. Они между собой никак не связаны и выполняют разные задачи. Сам роутер занимается только тем что обрабатывает адреса и например из него можно получить текущий адрес чтобы обратиться к апи.

Написано более двух лет назад
danilo9 @danilo9 Автор вопроса

pLavrenov, вы немного не так поняли.
Как отобразить полученный component или html из json в компоненте?
Я пробовал createElement и

Написано более двух лет назад
pLavrenov @pLavrenov

danilo9, ???????????

Написано более двух лет назад