materio-d8/web/themes/custom/materiotheme/vuejs/components/Content/MainContent.vue

<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>