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);
      let path = null;

      this.$router.options.routes.forEach(route => {
        // console.log('route.path', route.path);
        if (route.path == e.originalTarget.pathname) {
          path = e.originalTarget.pathname
          // TODO: check if path is current
          // TODO: as we can't break forEach is not the good method here
        }
      }, this)

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

</script>

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