D
D
danilo92022-04-03 19:03:09
Vue.js
danilo9, 2022-04-03 19:03:09

Vue3: How to make website without reload (load from API)?

Hello There is a site vc.ru, when navigating through the pages, an ajax request is executed like "url_of the current_page?mode=ajax" (example https://vc.ru/new?mode=ajax ), returns json with three main parameters:

module.page - contains data about the content of the page being loaded
module.ajaxify - contains the title, meta, and various titles of the page
module.sidebar - sidebar of the site
module.auth - data about the current client
Upon ajax execution, the site receives this json and updates the DOM elements, the title itself, meta , sidebar, etc., without reloading. And it creates the effect of moving to another page without reloading. How is this implemented? It is known that on Vue and Osnova's own php framework

I tried to do this, but nothing good came of it

I use Laravel 8 version and Vue 3, I run it locally via Docker, and I even did an automatic deployment on my server by updating to github (that is, the pipeline).

What I did now:

I created a Vue component that expects a Url parameter, it makes a request to this url and expects json.component, Vue.createElement converts already to html and outputs, but this is in theory, but nothing works
<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 is axios

Answer the question

In order to leave comments, you need to log in

1 answer(s)
P
pLavrenov, 2022-04-03
@danilo9

In any unclear situation, erase the documentation. It is best to read it from the beginning to the end. There will be an understanding of what it can do.
router.vuejs

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question