[VUE-router] Właściwy komponent nie załącza się.

Question

Pierw taki błąd dostaje:

You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

Ok, to juz zauważyłem, że jest to tylko warning związany z tym, że używam development mode w webpacku.  To raczej nie powinno mieć wpływu.

Problemem jest to, że nic nie renderuje, nie podmienia komponentu po zmianie routingu, właściwie żadnego nie ładuje.

Kod startowy

// Miejsce inicjacji biblioteki
import Application from './src/Tutor.vue';
import Seeder from '../commons/Plugins/seeder';
import TutorRoute from './src/routes/Tutor.js';
import Validator from '../commons/Plugins/validator';
import Store from './store';
import Vue from 'vue';

export class TutorPanel {
  constructor(option) {
    this.hook = option.hook;
    this.props = option.props ? option.props : {};
    this.props.subjects = JSON.parse(this.props.subjects);
    this.props.subjectLevel = JSON.parse(this.props.subjectLevel);
    this.props.whereCorepetitions = JSON.parse(this.props.whereCorepetitions);
    this.props.userData = JSON.parse(this.props.userData);
    this.construct();
  }

  construct() {
    Store.dispatch('setData', this.props);
    Vue.prototype.$seeder = (text) => Seeder.generateSeed(text);
    Vue.prototype.$validator = (method, element, message) => Validator.valid(method, element, message);
    new Vue({
      el: '#' + this.hook,
      TutorRoute,
      store: Store,
      template: '<App/>',
      components: { Application }
    })
  }
}

Miejsce zagniedżenia:

<div class="panelPage">
  <div id="app"></div>
</div>
  <script>
    require.config({
      context: "tutorPanel",
      baseUrl: "/js/vue/",
      waitSeconds: 60
      })(['tutorPanel'], function(Component) {
        var component = new Component['TutorPanel']({
          'hook': 'app',
          'props': {
            'className': 'componentUserPanel',
            'subjects': '[{"id":1,"name":"Biologia","type_id":0,"category_id":2},{"id":2,"name":"Chemia","type_id":0,"category_id":2},{"id":3,"name":"Filozofia","type_id":0,"category_id":1},{"id":4,"name":"Fizyka","type_id":0,"category_id":2},{"id":5,"name":"Geografia","type_id":0,"category_id":1},{"id":6,"name":"Historia","type_id":0,"category_id":1},{"id":7,"name":"Historia muzyki","type_id":0,"category_id":1},{"id":8,"name":"Historia sztuki","type_id":0,"category_id":1},{"id":9,"name":"Informatyka","type_id":0,"category_id":2},{"id":10,"name":"Język angielski","type_id":1,"category_id":0},{"id":11,"name":"Język francuski","type_id":1,"category_id":0},{"id":12,"name":"Język hiszpański","type_id":1,"category_id":0},{"id":13,"name":"Język łaciński i kultura antyczna","type_id":1,"category_id":0},{"id":14,"name":"Język niemiecki","type_id":1,"category_id":0},{"id":15,"name":"Język polski","type_id":1,"category_id":0},{"id":16,"name":"Język regionalny","type_id":1,"category_id":0},{"id":17,"name":"Język rosyjski","type_id":1,"category_id":0},{"id":18,"name":"Język włoski","type_id":1,"category_id":0},{"id":19,"name":"Matematyka","type_id":0,"category_id":2},{"id":20,"name":"Wiedza o społeczeństwie","type_id":0,"category_id":1}]',
            'subjectLevel': '[["podstawowy","średni","wyższy"],["A1","A2","B1","B2","C1","C2","native"]]',
            'whereCorepetitions': '["dowolnie","u korepetytora","u studenta"]',
            'userData': '{"isLogged":true,"login":"test_patryk2","user_id":241,"usertype":{"usertype":1,"imgFile":"teacher","label":"Korepetytor","type_of_panel":"tutor"}}'
          }
        });
      });

Router:

import AddOfferForm from  '../section/offer/Post.vue';
import VueRouter from 'vue-router';
import Vue from 'vue';

Vue.use('vue-router');

export default new VueRouter({
  routes: [
    { path: '/' , component: AddOfferForm },
  ]
});

Wraper aplikacji

<template>

<div>

test

<router-view></router-view>

</div>

</template>



<script>

export default {

name: 'app'

}

</script>

Gdzie popełniam błąd?

Problem rozwiązany. Powód? Podwójne montowanie.

Kod:

// Miejsce inicjacji biblioteki
import Application from './src/App.vue';
import Seeder from '../commons/Plugins/seeder';
import routes from './src/routes/tutor.js';
import Validator from '../commons/Plugins/validator';
import Store from './store';
import Vue from 'vue';
import VueRouter from 'vue-router';

export class TutorPanel {
  constructor(option) {
    this.hook = option.hook;
    this.props = option.props ? option.props : {};
    this.props.subjects = JSON.parse(this.props.subjects);
    this.props.subjectLevel = JSON.parse(this.props.subjectLevel);
    this.props.whereCorepetitions = JSON.parse(this.props.whereCorepetitions);
    this.props.userData = JSON.parse(this.props.userData);
    this.construct();
  }

  construct() {
    Vue.config.productionTip = false;
    Store.dispatch('setData', this.props);
    Vue.use(VueRouter);
    const router = new VueRouter({routes});
    Vue.prototype.$seeder = (text) => Seeder.generateSeed(text);
    Vue.prototype.$validator = (method, element, message) => Validator.valid(method, element, message);
    new Vue({
      el: '#' + this.hook,
      data: this.props,
      store: Store,
      router,
      render: h => h(Application),
    });
  }
}