materio-d8/web/themes/custom/materiotheme/vuejs/components/Pages/Home.vue

<script>

import Vue from 'vue'

export default {
  props: ['html'], // get the html from parent with props
  data() {
    return {
      template: null // compiled template from html used in render
    }
  },
  beforeMount() {
    // console.log('Home beforeMount');
    // compile the html src (coming from parent with props or from ajax call)
    if(this.html){
      // console.log('html', this.html);
      this.template = Vue.compile(this.html)
      this.$options.staticRenderFns = []
      this._staticTrees = []
      this.template.staticRenderFns.map(fn => (this.$options.staticRenderFns.push(fn)))
    }
  },
  render(h) {
    if(!this.template){
      return h('span', 'Loading ...')
    }else{
      return this.template.render.call(this)
    }
  },
  methods: {
    onClickLink(e){
      console.log("onClickLink", e, this.$router, this.$route);
      let path = null;
      // find existing router route compared with link href
      for (var i = 0; i < this.$router.options.routes.length; i++) {
        if (this.$router.options.routes[i].path == e.originalTarget.pathname) {
          if (e.originalTarget.pathname !== this.$route.path) {
            path = e.originalTarget.pathname
          }
          break;
        }
      }

      if (path) {
        this.$router.push({
          path: path
        })
      }
    }
  }
}

</script>

<style lang="scss" scoped>
</style>