<template lang="html"> <div :id="id"> <!-- <router-view name="home" :html="home_template_src"></router-view> --> <!-- <router-view name="base"></router-view> --> <router-view :html="home_template_src"/> </div> </template> <script> import { mapState, mapActions } from 'vuex' import { MA } from 'vuejs/api/ma-axios' import router from 'vuejs/route' export default { router, props:['id','html', 'isfront'], data() { return { home_template_src: null } }, beforeMount() { // console.log('MainContent beforeMount this.html', this.html); if(!this.home_template_src){ // console.log('no home_template_src'); if(this.html && this.isfront){ // if html prop is available and we are landing on home then record it has data this.home_template_src = this.html }else{ // else get it from ajax (e.g. if we didn't load the page from home) this.getHomeHtml() } } }, methods: { getHomeHtml(){ MA.get('materio_home/ajax/gethome') .then(({data}) => { // console.log('Home getHomeHtml data', data); this.home_template_src = data.rendered // record the html src into data }) .catch(( error ) => { console.warn('Issue with getHomeHtml', error) }) } } } </script> <style lang="scss" scoped> </style>