How to make vuejs to reload the component?

Added to the question.
In the presence of such a component
var testComponent = Vue.component('main-section', (resolve) => {
 axios.post('/test.php').then( (res) => {
 resolve({ 
 template: res.data
 mounted: () => {
 console.log('mounted-' + new Date().getTime());
}
});
});
 });


router
var router = new VueRouter({
 routes: [
{ path: '/foo', component: testComponent }, 
{ path: '/bar', component: testComponent },
{ path: '* ' component: testComponent }],
 mode: 'history'
});

<router-link to="/foo"></router-link>
<router-link to="/bar"></router-link>
<router-link to="/somelink"></router-link>
<section class="content">
 <router-view key="$route.fullPath"></router-view>
</section>

The crux of the problem - the component loads the template only once, in the future when you change the page address,
mounted fires, but the component is not redrawn, i.e. not making an ajax request to the server. Essentially the situation is this - you need to router view load different template depending on the way. The ability to create for each route a separate component is not suitable, because of the way dynamic and the server on each path gives different content. And ranting also unknown beforehand. Generally when I click on the links - console.log('mounted-' + new Date().getTime()); works, but a new template from the server is not loaded.
March 19th 20 at 09:23
2 answers
March 19th 20 at 09:25
Solution
//App.vue

<template>
 <div id="app">
 <router-link to="/random/12323jlwe">12323jlwe</router-link>|
 <router-link to="/random/cxz98c7zf8a">cxz98c7zf8a</router-link>|
 <router-link to="/random/90cvuiwa-r">90cvuiwa-r</router-link>
 <section class="content">
 <router-view key="$route.fullPath"></router-view>
</section>
</div>
</template>


//main.js

import from Vue "vue";
import Router from "vue-router";
import App from "./App.vue";

Vue.use(Router);

var testComponent = Vue.component("main-section", {
 template: `<component :is="template"></component>`,
 data() {
 return {
 template: Vue.compile("<div>please stand by</div>")
};
},
 created() {
 // axios.post...
 setTimeout(() => {
 this.template = Vue.compile(`<div>${this.$route.fullPath}</div>`);
 }, 2000);
},
 mounted() {
 console.log("mounted-" + new Date().getTime());
}
});

const router = new Router({
 mode: "history",
 routes: [{ path: "/random/:random" component: testComponent }]
});

/* eslint-disable no-new */
new Vue({
 el: "#app",
router,
 render: h => h(App)
});


https://codesandbox.io/s/50v0xwyzv4
Thank you. I approximately so in the end he did, according to the same algorithm
this.main = {
 render: (h, context) => { 
 return h({
 template: this.data.template
});
 }, 
 //updated: function(){ console.log(new Date().getTime()); } 
}

setTimeout( () => {
 this.data.template = `<div>loaded</div>`
 }, 2000)
- dustin_Boehm commented on March 19th 20 at 09:28
March 19th 20 at 09:27
So there is a solution to the other problems described. - dustin_Boehm commented on March 19th 20 at 09:30
@dustin_Boehm, could You tell me the difference between that question and Yours?
Do You like there the component is not updated when changing address - Osborne.Renner86 commented on March 19th 20 at 09:33
@Osborne.Renner86, that is not updated and need to be updated, that is, if you click on a link to load a new template in the component and compile it. - dustin_Boehm commented on March 19th 20 at 09:36

Find more questions by tags Vue.jsJavaScript