<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" :full="full_home_template_loaded"/> </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, full_home_template_loaded: false } }, 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() // } // console.log('no home_template_src') if (this.isfront) { // if html prop is available and we are landing on home then record it has data this.home_template_src = this.html } // in any case load the full home template if not already loaded if (!this.full_home_template_loaded) { this.getHomeHtml() } } }, methods: { getHomeHtml(){ console.log('MainContent getHomeHtml'); MA.get('materio_home/ajax/gethome') .then(({data}) => { // console.log('MainContent getHomeHtml data', data) this.full_home_template_loaded = true 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>