Answer the question
In order to leave comments, you need to log in
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>
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question