MainContent.vue 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. <template lang="html">
  2. <div :id="id">
  3. <!-- <router-view name="home" :html="home_template_src"></router-view> -->
  4. <!-- <router-view name="base"></router-view> -->
  5. <router-view :html="home_template_src"/>
  6. </div>
  7. </template>
  8. <script>
  9. import { mapState, mapActions } from 'vuex'
  10. import { MA } from 'vuejs/api/ma-axios'
  11. import router from 'vuejs/route'
  12. export default {
  13. router,
  14. props:['id','html', 'isfront'],
  15. data() {
  16. return {
  17. home_template_src: null
  18. }
  19. },
  20. beforeMount() {
  21. // console.log('MainContent beforeMount this.html', this.html);
  22. if(!this.home_template_src){
  23. // console.log('no home_template_src');
  24. if(this.html && this.isfront){ // if html prop is available and we are landing on home then record it has data
  25. this.home_template_src = this.html
  26. }else{ // else get it from ajax (e.g. if we didn't load the page from home)
  27. this.getHomeHtml()
  28. }
  29. }
  30. },
  31. methods: {
  32. getHomeHtml(){
  33. MA.get('materio_home/ajax/gethome')
  34. .then(({data}) => {
  35. // console.log('Home getHomeHtml data', data);
  36. this.home_template_src = data.rendered // record the html src into data
  37. })
  38. .catch(( error ) => {
  39. console.warn('Issue with getHomeHtml', error)
  40. })
  41. }
  42. }
  43. }
  44. </script>
  45. <style lang="scss" scoped>
  46. </style>