Laden dynamischer Komponenten und Vorlagen mit VueJS

Question

Ich überlege, VueJS für eine mehrseitige Website zu verwenden. Im offiziellen Beispiel von routing zeigen sie, dass Sie die Vorlage und die Komponente basierend auf der URL dynamisch ändern können, aber sie haben immer noch alle HTML-Vorlagen und JS-Komponenten in einer Datei, die alle auf einmal geladen werden.

Meine Website wird ziemlich groß sein, und ich möchte alles nur bei Bedarf laden. Also meine Frage ist: Wie kann ich diese HTML-Vorlagen und JS-Komponenten auf Anfrage asynchron laden, wenn die URL geändert wird? Es wäre hilfreich, nur zu zeigen, wie das obige Routing-Beispiel für das Laden dynamischer Skripte modifiziert werden könnte.

Answer 1

Update: siehe Async Components Abschnitt in der offiziellen Dokumentation.

Answer 2

Hardcoded, aber arbeiten. Die Webpack-Lösung ist zu schwer für Anfänger, wie ich.

var router = new VueRouter({hashbang:false}) 
var routerMap = {}; 

router.beforeEach(function (transition) { 
    var path = transition.to.path; 
    if ((path != '/') && !(path in routerMap)) { 
     _ajax('/reports/'+ path + '.html', function(res){//$.ajax replacement (async) 
      routerMap[path] = { 
       component: { 
        template: res 
       } 
      }; 
      router.on(path, routerMap[path]); //associate dynamically loaded component    

      transition.abort();  //abort current 
      router.stop();       
      router.start();   //restart router 
      router.go(path);  //init new transition to the same path 
     });//_ajax 
    } else 
     transition.next();   //default action for already loaded content 
});